/* Blackjack 21: 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:.5em}
.home-right{gap:.6em;min-width:14em}
.home-right .pill{width:100%}
.title{margin:.1em 0 0;font:900 3.3rem/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}
.best{margin:0;color:var(--gold-hi);font-weight:700;min-height:1.4em}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 .2em}
.home.wide{flex-direction:row;gap:2.5em}
.home-art{position:relative;width:7.5rem;height:5.6rem;margin-bottom:.3em}
.home-art .cd{position:absolute;left:50%;top:0;--cw:3.6rem;--ch:5.04rem;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{font:800 1.05rem/1.1 var(--round);color:var(--ink-soft);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.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}
.bank small{color:var(--ink-soft);font-size:.9rem}
.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)}}
.goalbar{height:.4rem;margin:.25rem .3rem .3rem;border-radius:99px;background:rgba(0,0,0,.28);overflow:hidden;flex:none}
.goalbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi));transition:width .5s}

.main{flex:1;min-height:0;display:flex;flex-direction:column;gap:.3rem}
#game.wide .main{flex-direction:row}
.felt{flex:1;min-height:0;min-width:0;position:relative;border-radius:1.2rem;background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.07),transparent 60%);
  box-shadow:inset 0 0 0 2px rgba(255,236,190,.12)}
.layer{position:absolute;inset:0;overflow:hidden;border-radius:1.2rem}
.shoe{position:absolute;right:.5rem;top:.5rem;width:2.4rem;height:2rem;border-radius:.35rem;background:linear-gradient(160deg,#3a2a1a,#1d140b);box-shadow:0 .2rem .4rem rgba(0,0,0,.4)}
.shoe::after{content:"";position:absolute;left:.3rem;right:.3rem;top:.3rem;height:.9rem;border-radius:.2rem;background:repeating-linear-gradient(90deg,#a7322a 0 .12rem,#7e221c 0 .24rem)}
.say{position:absolute;left:0;right:0;margin:0;text-align:center;font:800 1.3rem/1.2 var(--round);color:var(--paper);text-shadow:0 2px 8px rgba(0,0,0,.55);pointer-events:none;
  transform:translateY(-50%);padding:0 .5rem;z-index:60}
.say.good{color:var(--gold-hi)}
.say.tipping{color:#bfe9ff}

/* ---------------- playing cards: cream face, our own lattice back */
.cd{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);will-change:transform}
.cd .in{position:absolute;inset:0;border-radius:calc(var(--cw)*.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,.25)}
.cd .face{background:linear-gradient(170deg,#fff,#fbf6ea);color:#1d2433;overflow:hidden}
.cd.red .face{color:var(--red)}
.cd .r{position:absolute;left:7%;top:3%;font:800 calc(var(--cw)*.34)/1 var(--round);letter-spacing:-.04em}
.cd .s1{position:absolute;left:8%;top:calc(var(--cw)*.4);width:calc(var(--cw)*.24);height:calc(var(--cw)*.24)}
.cd .big{position:absolute;right:8%;bottom:6%;width:52%;height:auto;aspect-ratio:1}
.cd svg{fill:currentColor;display:block}
.cd .back{background:repeating-linear-gradient(45deg,transparent 0 calc(var(--cw)*.06),rgba(255,255,255,.14) 0 calc(var(--cw)*.09)),
  repeating-linear-gradient(-45deg,transparent 0 calc(var(--cw)*.06),rgba(255,255,255,.14) 0 calc(var(--cw)*.09)),linear-gradient(160deg,#a7322a,#6f1d18);
  border:calc(var(--cw)*.05) solid #fff8ee;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.dim .in{filter:brightness(.72) saturate(.8)}
.cd.won .face{box-shadow:0 0 0 .18rem var(--gold-hi),0 .3rem .9rem rgba(242,179,61,.5)}

/* totals and bets on the felt */
.badge{position:absolute;left:0;top:0;display:flex;align-items:baseline;gap:.3em;padding:.2em .6em;border-radius:999px;background:rgba(4,22,19,.86);color:var(--paper);
  font:900 1.15rem/1.1 var(--round);white-space:nowrap;z-index:50;box-shadow:0 .15rem .4rem rgba(0,0,0,.35);transition:opacity .2s}
.badge small{font:700 .72em/1 var(--sans);color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em}
.badge em{font-style:normal;font-size:.8em;color:var(--gold-hi)}
.badge.on{background:var(--gold);color:#3a2504}
.badge.on small{color:#5b3b06}
.badge.bust,.badge.lose{background:#5c1a14}
.badge.win,.badge.bj{background:#f2b33d;color:#3a2504}
.badge.win em,.badge.bj em{color:#3a2504}
.badge.push{background:#3d4b55}
.betchip{position:absolute;left:0;top:0;width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;font:900 .85rem/1 var(--round);color:#2a1a04;z-index:55;
  background:radial-gradient(circle,#fff6dc 0 52%,transparent 53%),repeating-conic-gradient(var(--gold) 0 30deg,#fff4d6 0 60deg);box-shadow:0 .15rem .35rem rgba(0,0,0,.45);transition:transform .3s}
.betchip.big{width:3.6rem;height:3.6rem;font-size:1.1rem}
.float{position:absolute;font:900 1.7rem/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;transform:translateX(-50%)}
.float.neg{color:#ffb3a8}
@keyframes rise{0%{opacity:0;margin-top:.6rem}15%{opacity:1}100%{opacity:0;margin-top:-2.6rem}}

/* ---------------- the dock: bets, then moves */
.dock{flex:none;height:7.4rem;display:flex;align-items:center;justify-content:center}
#game.wide .dock{height:auto;width:13rem}
.betdock{display:grid;grid-template-columns:auto auto;grid-template-areas:"line chips" "btns btns";align-items:center;justify-content:center;gap:.45rem .8rem}
.betline{grid-area:line;font:700 1.05rem/1 var(--round);color:var(--ink-soft);text-align:center}
.betline b{display:block;font:900 1.6rem/1.1 var(--round);color:var(--paper);font-variant-numeric:tabular-nums}
.chiprow{grid-area:chips;display:flex;gap:.5rem}
.betbtns{grid-area:btns;display:flex;gap:.6rem;justify-content:center}
.betbtns .pill{padding:.55em 1.5em}
#deal{min-width:8rem}
#game.wide .betdock{grid-template-columns:1fr;grid-template-areas:"line" "chips" "btns";gap:.5rem}
#game.wide .chiprow{flex-wrap:wrap;justify-content:center}
#game.wide .betbtns .pill{padding:.55em .9em;min-width:0}
#game.wide #deal{flex:1}
.chipb{width:3.2rem;height:3.2rem;min-width:44px;min-height:44px;border-radius:50%;border:0;padding:0;font:900 1rem/1 var(--round);color:#fff;
  background:radial-gradient(circle,var(--c) 0 50%,transparent 51%),repeating-conic-gradient(var(--c) 0 30deg,#fff 0 60deg);box-shadow:0 .2rem 0 rgba(0,0,0,.35),0 .35rem .6rem rgba(0,0,0,.3);text-shadow:0 1px 2px rgba(0,0,0,.5)}
.chipb:active{transform:translateY(2px)}
.chipb:disabled{opacity:.35;cursor:default}
.chipb:focus-visible,.act:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px}
.shake{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

.playdock{display:flex;gap:.45rem;justify-content:center;width:100%;max-width:36rem}
.act{flex:1;min-width:0;min-height:3.4rem;border:0;border-radius:.9rem;font:800 1.12rem/1 var(--round);color:#3a2504;padding:0 .2em;
  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:active{transform:translateY(2px);box-shadow:0 1px 0 #fff8 inset,0 1px 0 #7a4d06}
.act:disabled{opacity:.35;cursor:default;filter:grayscale(.6)}
.act.tipb{flex:.8;background:rgba(255,255,255,.12);color:var(--ink);box-shadow:inset 0 0 0 2px var(--hair);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15em;font-size:.9rem}
.act.tipb svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.act.tipped{animation:glow 1.1s ease-in-out 2;box-shadow:0 0 0 .2rem #bfe9ff,0 0 1.2rem #bfe9ff}
@keyframes glow{50%{box-shadow:0 0 0 .3rem #fff,0 0 1.8rem #bfe9ff}}
#game.wide .playdock{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
#game.wide .act.tipb{grid-column:span 2;flex-direction:row;min-height:2.8rem}

/* ---------------- 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)}
.card.result .actions{flex-direction:row;flex-wrap:wrap;justify-content:center}
.card .tables .row b small{display:inline;font-weight:600;margin-left:.3em}
.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}