/* ============================================================
   STAKES v2 — Balatro-flavored blackjack roguelike
   New: ability slots w/ cooldowns, shop, HEAT (true count)
   that warps payouts, goal progress bar, ambient synth loop.
   ============================================================ */
:root{
  --gold:#ffd24a;
  --gold-deep:#e0a528;
  --red:#ff4f5e;
  --red-deep:#c2273a;
  --blue:#4fb2ff;
  --teal:#22d3b2;
  --purple:#b06cff;
  --ink:#0b1020;
  --panel:rgba(8,14,28,.62);
  --panel-edge:rgba(255,255,255,.10);
  --white:#f5f3ea;
  --card-w:74px;
  --card-h:104px;
  --shadow-txt:0 3px 0 rgba(0,0,0,.55);
  font-size:16px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{
  font-family:"Trebuchet MS","Segoe UI",Verdana,sans-serif;
  background:#0a1322;color:var(--white);user-select:none;
  touch-action:manipulation;-webkit-user-select:none;
}
canvas#bg{position:fixed;inset:0;width:100%;height:100%;image-rendering:pixelated;filter:saturate(1.15);z-index:0}
#vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,transparent 45%,rgba(0,0,10,.55) 100%)}
canvas#fx{position:fixed;inset:0;z-index:60;pointer-events:none}
#flash{position:fixed;inset:0;z-index:55;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 45%, rgba(255,235,160,.9), rgba(255,120,80,.25) 55%, transparent 75%);
  mix-blend-mode:screen}
#flash.go{animation:flashout .55s ease-out forwards}
@keyframes flashout{0%{opacity:.95}100%{opacity:0}}

#app{position:relative;z-index:5;height:100%;display:flex;flex-direction:column;
  max-width:1100px;margin:0 auto;padding:8px 14px 6px;will-change:transform}
.chunk{font-weight:900;letter-spacing:.03em;text-shadow:var(--shadow-txt)}

/* ============ HEADER ============ */
header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 2px 6px}
#stakeBadge{display:flex;align-items:center;gap:10px;background:var(--panel);
  border:2px solid var(--panel-edge);border-radius:14px;padding:7px 14px 7px 9px;
  box-shadow:0 4px 0 rgba(0,0,0,.35)}
#stakeChip{width:34px;height:34px;border-radius:50%;border:4px dashed rgba(255,255,255,.75);
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.45), transparent 60%), #e9e9e9;
  box-shadow:inset 0 -4px 6px rgba(0,0,0,.35), 0 3px 0 rgba(0,0,0,.4);
  animation:chipspin 14s linear infinite}
@keyframes chipspin{to{transform:rotate(360deg)}}
#stakeName{font-size:.82rem;line-height:1.05}
#stakeName small{display:block;font-size:.6rem;opacity:.65;font-weight:700;letter-spacing:.12em}
#title{font-size:clamp(1.4rem,4vw,2.2rem);color:var(--gold);
  text-shadow:0 4px 0 rgba(0,0,0,.55), 0 0 26px rgba(255,210,74,.35);
  animation:titlewob 3.4s ease-in-out infinite;letter-spacing:.06em}
@keyframes titlewob{0%,100%{transform:rotate(-1.4deg) scale(1)}50%{transform:rotate(1.4deg) scale(1.035)}}
#hudRight{display:flex;align-items:center;gap:8px}
.hudBox{background:var(--panel);border:2px solid var(--panel-edge);border-radius:14px;
  padding:6px 12px;text-align:center;box-shadow:0 4px 0 rgba(0,0,0,.35)}
.hudBox small{display:block;font-size:.56rem;letter-spacing:.16em;opacity:.65;font-weight:800}
#bank{font-size:1.3rem;color:var(--gold)}
#bank.pump{animation:bankpump .35s ease-out}
@keyframes bankpump{30%{transform:scale(1.22);color:#fff}}
#shoeCount{font-size:1rem}
#heatVal{font-size:1rem;transition:color .3s}
#heatBox{position:relative;cursor:pointer}
#heatFx{font-size:.5rem;letter-spacing:.06em;opacity:.8;margin-top:1px;min-height:.62rem}
#tableStatus{display:none;margin:0 auto 6px;width:fit-content;max-width:94%;
  padding:5px 16px 7px;border-radius:11px;font-size:.72rem;letter-spacing:.06em;
  border:2px solid;box-shadow:0 4px 0 rgba(0,0,0,.4)}
#tableStatus.hot{display:block;color:#ffd9a8;background:rgba(90,35,10,.55);
  border-color:rgba(255,150,60,.65);animation:hotpulse 1.1s ease-in-out infinite}
#tableStatus.cold{display:block;color:#cfe7ff;background:rgba(12,40,70,.6);
  border-color:rgba(120,180,255,.6)}
#heatBox.hot #heatVal{color:#ff9a3d;text-shadow:0 0 12px rgba(255,120,40,.9),var(--shadow-txt)}
#heatBox.hot{border-color:rgba(255,150,60,.6);box-shadow:0 4px 0 rgba(0,0,0,.35),0 0 16px rgba(255,120,40,.35);animation:hotpulse 1.1s ease-in-out infinite}
@keyframes hotpulse{50%{box-shadow:0 4px 0 rgba(0,0,0,.35),0 0 26px rgba(255,120,40,.6)}}
#heatBox.cold #heatVal{color:#9fd4ff;text-shadow:0 0 12px rgba(120,180,255,.9),var(--shadow-txt)}
#heatBox.cold{border-color:rgba(120,180,255,.55)}
.iconBtn{width:42px;height:42px;border-radius:12px;border:2px solid var(--panel-edge);
  background:var(--panel);color:var(--white);font-size:1.1rem;cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,.35);transition:transform .1s}
.iconBtn:hover{transform:translateY(-2px) rotate(-3deg)}
.iconBtn:active{transform:translateY(2px)}

/* oracle preview card */
#oracleCard{position:fixed;z-index:65;width:40px;height:56px;border-radius:6px;
  background:linear-gradient(160deg,#fff,#efe9d8);color:#1d2433;display:none;
  align-items:center;justify-content:center;flex-direction:column;font-weight:900;
  box-shadow:0 4px 10px rgba(0,0,0,.5),0 0 16px rgba(176,108,255,.8);
  border:2px solid var(--purple);font-size:.95rem;line-height:1;
  animation:oraclebob 1.6s ease-in-out infinite}
#oracleCard.redS{color:#d8273c}
#oracleCard small{font-size:.42rem;color:var(--purple);letter-spacing:.1em;margin-bottom:2px}
@keyframes oraclebob{50%{transform:translateY(-4px) rotate(3deg)}}

/* ============ GOAL BAR ============ */
#goalWrap{margin:0 2px 4px;background:var(--panel);border:2px solid var(--panel-edge);
  border-radius:12px;padding:5px 12px 7px;box-shadow:0 4px 0 rgba(0,0,0,.35)}
#goalTop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
#goalLabel{font-size:.6rem;letter-spacing:.2em;opacity:.65;font-weight:900}
#goalText{font-size:.78rem;font-weight:900;color:var(--gold);text-shadow:var(--shadow-txt)}
#goalTrack{height:10px;border-radius:6px;background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.12);overflow:hidden}
#goalFill{height:100%;width:0%;border-radius:6px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold) 60%,#fff3c2);
  box-shadow:0 0 10px rgba(255,210,74,.6);
  transition:width .8s cubic-bezier(.2,1,.3,1)}
#goalWrap.near #goalFill{animation:goalglow .9s ease-in-out infinite}
@keyframes goalglow{50%{box-shadow:0 0 22px rgba(255,210,74,1);filter:brightness(1.25)}}

/* ============ TABLE ============ */
main{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;min-height:0}
.areaLabel{font-size:.6rem;font-weight:900;letter-spacing:.26em;opacity:.55;text-align:center;margin-bottom:3px}
#dealerRow{display:flex;justify-content:center;align-items:center;gap:14px;min-height:calc(var(--card-h) + 14px)}
#dealerCards{position:relative;display:flex}
#dealerArea{text-align:center}
.valBadge{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:32px;
  padding:0 10px;border-radius:10px;background:#15233d;border:2px solid rgba(255,255,255,.18);
  font-weight:900;font-size:1rem;text-shadow:var(--shadow-txt);box-shadow:0 3px 0 rgba(0,0,0,.4);
  opacity:0;transform:scale(.5);transition:opacity .15s}
.valBadge.show{opacity:1;animation:badgepop .3s cubic-bezier(.2,1.8,.4,1) forwards}
@keyframes badgepop{0%{transform:scale(.4)}100%{transform:scale(1)}}
.valBadge.is21{background:var(--gold);color:#3a2a00;border-color:#fff;box-shadow:0 0 18px rgba(255,210,74,.7),0 3px 0 rgba(0,0,0,.4)}
.valBadge.isBust{background:var(--red-deep);border-color:#ff8c96}

#spots{display:flex;justify-content:center;gap:clamp(8px,2.5vw,28px)}
.spot{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 8px 10px;
  border-radius:18px;border:2px solid transparent;transition:border-color .2s, background .2s;
  min-width:calc(var(--card-w) * 2.1)}
.spot.focused{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.045)}
.spot .hands{display:flex;gap:10px;min-height:calc(var(--card-h) + 10px);align-items:flex-end}
.hand{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px}
.hand .cards{position:relative;display:flex;min-width:var(--card-w);min-height:var(--card-h)}
.hand.activeHand .cards::after{content:"";position:absolute;inset:-7px;border-radius:14px;
  border:3px solid rgba(255,255,255,.85);
  box-shadow:0 0 16px rgba(255,255,255,.45), inset 0 0 12px rgba(255,255,255,.15);
  animation:handpulse 1s ease-in-out infinite;pointer-events:none}
@keyframes handpulse{0%,100%{opacity:.95;transform:scale(1)}50%{opacity:.45;transform:scale(1.03)}}
.hand.bustedHand .cards{filter:saturate(.25) brightness(.7)}
.hand .tag{position:absolute;top:-12px;right:-10px;z-index:5;background:var(--red);
  border:2px solid #fff;border-radius:8px;font-size:.6rem;font-weight:900;padding:2px 6px;
  color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.4);box-shadow:0 2px 0 rgba(0,0,0,.4);
  transform:rotate(8deg);display:none}
.hand .tag.show{display:block;animation:badgepop .3s cubic-bezier(.2,1.8,.4,1)}

.betZone{width:82px;height:82px;border-radius:50%;border:3px dashed rgba(255,255,255,.30);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;cursor:pointer;transition:transform .12s,border-color .2s,box-shadow .2s}
.betZone:hover{transform:scale(1.07);border-color:rgba(255,255,255,.65)}
.betZone:active{transform:scale(.96)}
.spot.focused .betZone{border-color:var(--gold);box-shadow:0 0 18px rgba(255,210,74,.25)}
.betZone .chipStack{position:absolute;bottom:32px;left:50%;pointer-events:none}
.miniChip{position:absolute;left:-16px;width:32px;height:32px;border-radius:50%;
  border:4px dashed rgba(255,255,255,.8);
  box-shadow:inset 0 -4px 5px rgba(0,0,0,.35), 0 2px 0 rgba(0,0,0,.45)}
.miniChip.land{animation:chipland .28s cubic-bezier(.2,1.6,.4,1)}
@keyframes chipland{0%{transform:translateY(-46px) scale(1.4)}70%{transform:translateY(3px) scale(.95)}100%{transform:translateY(0) scale(1)}}
.betZone .betAmt{position:relative;z-index:3;margin-top:36px;font-weight:900;font-size:.88rem;
  color:var(--gold);text-shadow:var(--shadow-txt)}
.betZone .spotKey{position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  font-size:.56rem;font-weight:900;background:#15233d;border:2px solid rgba(255,255,255,.2);
  padding:1px 7px;border-radius:7px;letter-spacing:.05em}

.result{min-height:1.4rem;font-size:.95rem;font-weight:900;letter-spacing:.04em;
  text-shadow:var(--shadow-txt);opacity:0;transform:translateY(6px) scale(.7);text-align:center}
.result.show{animation:respop .45s cubic-bezier(.2,1.9,.35,1) forwards}
@keyframes respop{60%{opacity:1;transform:translateY(-4px) scale(1.18)}100%{opacity:1;transform:translateY(0) scale(1)}}
.result.win{color:var(--gold)}
.result.lose{color:#ff7c89}
.result.push{color:#bfe3ff}
.result.bj{color:#fff;text-shadow:0 0 14px var(--gold),0 3px 0 rgba(0,0,0,.55)}

/* ============ CARDS ============ */
.cardO{position:relative;width:var(--card-w);height:var(--card-h);
  margin-left:calc(var(--card-w) * -0.45);
  transition:transform .5s cubic-bezier(.18,1.35,.35,1);z-index:1}
.cardO:first-child{margin-left:0}
.cardO.dissolve{animation:dissolve .55s ease-in forwards}
@keyframes dissolve{to{transform:translateY(-60px) rotate(40deg) scale(.4);opacity:0;filter:blur(3px)}}
.cardI{width:100%;height:100%;
  animation:idlefloat var(--idledur,3.6s) ease-in-out var(--idledel,0s) infinite alternate}
@keyframes idlefloat{from{transform:translateY(-1.5px) rotate(-1.1deg)}to{transform:translateY(2px) rotate(1.1deg)}}
.cardF{width:100%;height:100%;position:relative;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .45s cubic-bezier(.3,1.4,.4,1)}
.cardF.down{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:9px;backface-visibility:hidden;
  box-shadow:0 5px 10px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.25) inset}
.face.front{background:linear-gradient(160deg,#ffffff 0%,#f2efe4 70%,#e6e0cd 100%);
  color:#1d2433;display:flex;align-items:center;justify-content:center}
.face.front.redS{color:#d8273c}
.face .pip{font-size:2.5rem;line-height:1;filter:drop-shadow(0 2px 0 rgba(0,0,0,.18));transform:translateY(2px)}
.face .corner{position:absolute;font-weight:900;font-size:.86rem;line-height:.95;text-align:center}
.face .corner.tl{top:5px;left:6px}
.face .corner.br{bottom:5px;right:6px;transform:rotate(180deg)}
.face.back{transform:rotateY(180deg);
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.16) 0 18%, transparent 19%),
  repeating-linear-gradient(45deg,#b3273c 0 7px,#9a1e31 7px 14px);
  border:5px solid #f0ead6}
.cardF.xray .face.back{box-shadow:0 0 22px 6px rgba(176,108,255,.9)}
.cardO.glow21 .face.front{box-shadow:0 0 18px 4px rgba(255,210,74,.8),0 5px 10px rgba(0,0,0,.45)}
.cardO.bjShine .face.front{background:linear-gradient(115deg,#fff 30%,#ffe9a8 45%,#fff 60%);
  background-size:300% 100%;animation:shine 1.2s linear infinite}
@keyframes shine{to{background-position:-300% 0}}

/* ============ ABILITY BAR ============ */
#abilityBar{display:flex;justify-content:center;gap:8px;padding:4px 0 6px;flex-wrap:wrap}
.abSlot{position:relative;width:54px;height:54px;border-radius:13px;cursor:pointer;
  background:var(--panel);border:2px solid var(--panel-edge);
  box-shadow:0 4px 0 rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;font-size:1.45rem;
  transition:transform .12s, box-shadow .2s, border-color .2s;filter:none}
.abSlot .ic{display:inline-block;transition:transform .12s}
.abSlot:hover .ic{transform:scale(1.18) rotate(-5deg)}
.abSlot:active{transform:scale(.94)}
.abSlot .key{position:absolute;top:-7px;left:-5px;font-size:.52rem;font-weight:900;
  background:#15233d;border:1px solid rgba(255,255,255,.3);border-radius:5px;
  padding:0 4px;text-shadow:none;color:#cdd6ea}
.abSlot.locked{opacity:.55;filter:grayscale(1)}
.abSlot.locked::after{content:"🔒";position:absolute;bottom:-6px;right:-5px;font-size:.7rem}
.abSlot.ready{border-color:rgba(255,255,255,.5);
  box-shadow:0 4px 0 rgba(0,0,0,.4), 0 0 14px var(--abGlow,rgba(255,210,74,.45));
  animation:abready 1.6s ease-in-out infinite}
@keyframes abready{50%{box-shadow:0 4px 0 rgba(0,0,0,.4),0 0 24px var(--abGlow,rgba(255,210,74,.8))}}
.abSlot.armed{border-color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.18),var(--panel));
  animation:armedpulse .8s ease-in-out infinite}
@keyframes armedpulse{50%{transform:scale(1.1) rotate(2deg)}}
.abSlot.cooling{opacity:.5}
.abSlot .cd{position:absolute;inset:0;border-radius:11px;background:rgba(5,10,22,.72);
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;font-weight:900;
  color:#9fb4d8;text-shadow:var(--shadow-txt)}
.abSlot.pop{animation:abpop .4s cubic-bezier(.2,1.8,.4,1)}
@keyframes abpop{40%{transform:scale(1.35) rotate(-8deg)}}
#abilityHint{text-align:center;font-size:.66rem;font-weight:800;letter-spacing:.06em;
  opacity:.75;min-height:.95rem;color:#cdd6ea;text-shadow:0 2px 0 rgba(0,0,0,.5)}

/* ============ CONTROLS ============ */
footer{padding:2px 0 4px}
.controlRow{display:flex;justify-content:center;align-items:center;gap:9px;flex-wrap:wrap}
.btn{position:relative;font-family:inherit;font-weight:900;letter-spacing:.05em;
  font-size:clamp(.78rem,2.4vw,1rem);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.45);
  border:none;border-radius:13px;cursor:pointer;padding:11px 18px 13px;
  background:var(--bb,#2f6bd8);box-shadow:0 5px 0 var(--bs,#1c47a0), 0 8px 14px rgba(0,0,0,.4);
  transition:transform .08s, box-shadow .08s, filter .15s}
.btn:hover:not(:disabled){transform:translateY(-2px) rotate(-.6deg);filter:brightness(1.12)}
.btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--bs),0 3px 8px rgba(0,0,0,.4)}
.btn:disabled{opacity:.32;cursor:default;filter:saturate(.4)}
.btn kbd{font-family:inherit;font-size:.6rem;background:rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.35);border-radius:5px;padding:1px 5px;margin-left:6px;vertical-align:2px}
.btn.hit{--bb:#2f9e57;--bs:#1c6b39}
.btn.stand{--bb:#d8483f;--bs:#962a25}
.btn.double{--bb:#8a5cf6;--bs:#5b36b5}
.btn.split{--bb:#e08a1f;--bs:#a35e0c}
.btn.deal{--bb:#d8a01f;--bs:#9a6f0c;font-size:clamp(.92rem,3vw,1.15rem);padding:12px 28px 14px}
.btn.ghost{--bb:#39455e;--bs:#222b3d}
.btn.yes{--bb:#2f9e57;--bs:#1c6b39}
.btn.no{--bb:#39455e;--bs:#222b3d}
.btn.shop{--bb:#7a3fd1;--bs:#4d2588}

#chipRow{display:flex;justify-content:center;gap:9px;margin-bottom:8px;flex-wrap:wrap}
.chipBtn{width:52px;height:52px;border-radius:50%;cursor:pointer;
  border:5px dashed rgba(255,255,255,.85);color:#fff;font-weight:900;font-size:.76rem;
  text-shadow:0 2px 0 rgba(0,0,0,.5);
  box-shadow:inset 0 -6px 8px rgba(0,0,0,.35), 0 4px 0 rgba(0,0,0,.45);
  transition:transform .12s, box-shadow .12s;background:var(--cc,#888)}
.chipBtn:hover{transform:translateY(-4px) rotate(-6deg) scale(1.06)}
.chipBtn:active{transform:translateY(1px) scale(.95)}
.chipBtn.sel{transform:translateY(-7px) scale(1.13);
  box-shadow:inset 0 -6px 8px rgba(0,0,0,.35), 0 7px 0 rgba(0,0,0,.45), 0 0 20px rgba(255,255,255,.45);
  border-style:solid}
#insurancePanel{display:none;flex-direction:column;align-items:center;gap:9px;padding:3px 0}
#insurancePanel.show{display:flex}
#insText{font-size:.95rem;text-align:center;line-height:1.6}
#insText b{color:var(--gold)}
#insText .insAdvice{display:inline-block;margin-top:5px;font-size:.72rem;opacity:.85;
  background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.18);
  border-radius:9px;padding:4px 12px;font-weight:800}
#hintLine{text-align:center;font-size:.56rem;letter-spacing:.1em;font-weight:800;opacity:.4;margin-top:5px}

/* ============ BANNERS / OVERLAYS ============ */
#bannerWrap{position:fixed;inset:0;z-index:70;pointer-events:none;display:flex;align-items:center;justify-content:center}
.banner{font-size:clamp(2rem,8vw,4.4rem);font-weight:900;letter-spacing:.04em;color:#fff;
  text-shadow:0 6px 0 rgba(0,0,0,.5), 0 0 40px rgba(255,210,74,.5);
  animation:bannerin 1.5s cubic-bezier(.2,1.6,.3,1) forwards;white-space:nowrap}
.banner.gold{color:var(--gold)}
.banner.red{color:var(--red);text-shadow:0 6px 0 rgba(0,0,0,.5),0 0 40px rgba(255,80,90,.55)}
.banner.blue{color:#9fd4ff;text-shadow:0 6px 0 rgba(0,0,0,.5),0 0 40px rgba(110,180,255,.5)}
.banner.purple{color:#d9b8ff;text-shadow:0 6px 0 rgba(0,0,0,.5),0 0 40px rgba(176,108,255,.6)}
@keyframes bannerin{0%{opacity:0;transform:scale(.3) rotate(-8deg)}
  12%{opacity:1;transform:scale(1.15) rotate(2deg)}20%{transform:scale(1) rotate(-1deg)}
  80%{opacity:1;transform:scale(1.02) rotate(.5deg)}100%{opacity:0;transform:scale(1.25) rotate(0)}}

.overlayBase{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
  flex-direction:column;gap:16px;background:rgba(4,8,18,.84);backdrop-filter:blur(3px)}
.overlayBase.show{display:flex}
#overlay h2{font-size:clamp(2rem,7vw,3.4rem);color:var(--red);text-shadow:0 5px 0 rgba(0,0,0,.6);animation:titlewob 2.5s ease-in-out infinite}
#overlay p{opacity:.75;max-width:380px;text-align:center;line-height:1.5;font-weight:700}

/* shop */
#shopOverlay h2{font-size:clamp(1.6rem,5vw,2.4rem);color:var(--purple);
  text-shadow:0 5px 0 rgba(0,0,0,.6), 0 0 28px rgba(176,108,255,.5);animation:titlewob 3s ease-in-out infinite}
#shopGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;
  max-width:740px;width:92%;max-height:62vh;overflow-y:auto;padding:4px}
.shopCard{background:var(--panel);border:2px solid var(--panel-edge);border-radius:16px;
  padding:14px;display:flex;flex-direction:column;gap:7px;
  box-shadow:0 5px 0 rgba(0,0,0,.4);transition:transform .15s,border-color .2s}
.shopCard:hover{transform:translateY(-3px) rotate(-.5deg);border-color:rgba(176,108,255,.5)}
.shopCard .head{display:flex;align-items:center;gap:9px}
.shopCard .icon{font-size:1.7rem;filter:drop-shadow(0 2px 0 rgba(0,0,0,.4))}
.shopCard .nm{font-weight:900;font-size:.92rem;text-shadow:var(--shadow-txt)}
.shopCard .nm small{display:block;font-size:.56rem;opacity:.6;letter-spacing:.1em}
.shopCard .desc{font-size:.74rem;line-height:1.4;opacity:.85;font-weight:700;flex:1}
.shopCard .btn{padding:8px 14px 10px;font-size:.8rem}
.shopCard .cardBtns{display:flex;gap:7px;flex-wrap:wrap}
.shopCard .cardBtns .btn{flex:1;min-width:90px;padding:8px 8px 10px;font-size:.7rem}
.abSlot.plus{border-style:dashed;opacity:.75;font-size:1.6rem;color:#9fb4d8}
.abSlot.plus:hover{opacity:1;border-color:rgba(176,108,255,.6)}
.shopCard.owned{border-color:rgba(57,210,122,.45)}
.shopCard.owned .btn{--bb:#2f9e57;--bs:#1c6b39;opacity:.6;cursor:default}
#shopBank{font-weight:900;color:var(--gold);text-shadow:var(--shadow-txt);font-size:1.05rem}

#toast{position:fixed;top:14px;left:50%;transform:translateX(-50%) translateY(-90px);
  z-index:95;background:#15233d;border:2px solid rgba(255,255,255,.25);border-radius:12px;
  padding:9px 18px;font-weight:900;font-size:.82rem;letter-spacing:.08em;
  box-shadow:0 5px 0 rgba(0,0,0,.4);transition:transform .35s cubic-bezier(.2,1.5,.4,1);
  max-width:90vw;text-align:center}
#toast.show{transform:translateX(-50%) translateY(0)}

/* stakes ladder + heat help */
#stakesList{display:flex;flex-direction:column;gap:7px;max-height:56vh;overflow-y:auto;
  width:min(440px,92%);padding:4px}
.stakeRow{display:flex;align-items:center;gap:12px;background:var(--panel);
  border:2px solid var(--panel-edge);border-radius:13px;padding:9px 14px;
  box-shadow:0 4px 0 rgba(0,0,0,.4)}
.stakeRow .sChip{width:30px;height:30px;border-radius:50%;flex:none;
  border:4px dashed rgba(255,255,255,.75);
  box-shadow:inset 0 -4px 5px rgba(0,0,0,.35),0 2px 0 rgba(0,0,0,.4)}
.stakeRow .sName{flex:1;font-weight:900;font-size:.88rem;text-shadow:var(--shadow-txt)}
.stakeRow .sName small{display:block;font-size:.6rem;opacity:.6;font-weight:800;letter-spacing:.08em}
.stakeRow .sMark{font-weight:900;font-size:.72rem;letter-spacing:.06em;text-shadow:var(--shadow-txt)}
.stakeRow.done{border-color:rgba(57,210,122,.4)}
.stakeRow.done .sMark{color:#39d27a}
.stakeRow.now{border-color:var(--gold);background:rgba(255,210,74,.08);
  box-shadow:0 4px 0 rgba(0,0,0,.4),0 0 16px rgba(255,210,74,.3)}
.stakeRow.now .sMark{color:var(--gold)}
.stakeRow.lock{opacity:.6}
#heatHelp{max-width:480px;width:92%;display:flex;flex-direction:column;gap:10px}
#heatHelp p{font-size:.82rem;line-height:1.55;font-weight:700;opacity:.92;
  background:var(--panel);border:2px solid var(--panel-edge);border-radius:12px;
  padding:10px 14px;box-shadow:0 4px 0 rgba(0,0,0,.35)}
#stakeBadge{cursor:pointer;transition:transform .12s}
#stakeBadge:hover{transform:translateY(-2px)}
#stakeBadge:active{transform:translateY(1px)}
/* power charge pill */
#chargePill{display:none;margin:0 auto 8px;width:fit-content;padding:4px 14px 6px;
  border-radius:10px;font-size:.66rem;letter-spacing:.08em;font-weight:900;
  text-shadow:var(--shadow-txt);border:2px solid rgba(176,108,255,.45);
  background:rgba(60,30,110,.4);color:#d9c4ff;box-shadow:0 3px 0 rgba(0,0,0,.4);
  cursor:default}
#chargePill.met{border-color:rgba(57,210,122,.55);background:rgba(20,80,45,.4);color:#bfffd9}
#chargePill.on{display:block}
.btn.allin{--bb:#b3273c;--bs:#7a1626}
.btn.colorup{--bb:#c2902a;--bs:#8a6315}
.btn.bookGlow{outline:3px solid var(--gold);outline-offset:2px;
  box-shadow:0 5px 0 var(--bs),0 0 22px rgba(255,210,74,.65);
  animation:bookpulse 1s ease-in-out infinite}
@keyframes bookpulse{50%{box-shadow:0 5px 0 var(--bs),0 0 34px rgba(255,210,74,.95)}}
/* MULT box */
#multBox{cursor:help}
#multBox.charged{border-color:rgba(255,210,74,.6);
  box-shadow:0 4px 0 rgba(0,0,0,.35),0 0 16px rgba(255,210,74,.4);
  animation:hotpulse 1.2s ease-in-out infinite}
#multBox.charged #multVal{color:var(--gold);text-shadow:0 0 12px rgba(255,210,74,.9),var(--shadow-txt)}
#multVal{font-size:1rem}
/* locked betting spots */
.spot.lockedSpot{opacity:.45;filter:grayscale(.7) brightness(.85)}
.spot.lockedSpot .betZone{cursor:not-allowed;border-style:solid;border-color:rgba(255,255,255,.14)}
.spot.lockedSpot .betZone:hover{transform:none;border-color:rgba(255,255,255,.2)}
.lockTag{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);
  font-size:.5rem;font-weight:900;letter-spacing:.1em;white-space:nowrap;
  opacity:.85;color:#cdd6ea;text-shadow:0 2px 0 rgba(0,0,0,.5);display:none}
.spot.lockedSpot .lockTag{display:block}
.spot.lockedSpot .spotKey{opacity:.4}
/* tutorial */
#tutCard{background:rgba(10,18,36,.92);border:2px solid rgba(255,255,255,.18);
  border-radius:20px;padding:26px 28px 22px;width:min(460px,92%);
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  box-shadow:0 8px 0 rgba(0,0,0,.45), 0 0 50px rgba(255,210,74,.12)}
#tutIcon{font-size:3.2rem;filter:drop-shadow(0 4px 0 rgba(0,0,0,.4));
  animation:titlewob 2.8s ease-in-out infinite}
#tutTitle{font-size:1.35rem;color:var(--gold)}
#tutText{font-size:.88rem;line-height:1.6;font-weight:700;opacity:.92;min-height:5.5em}
#tutText b{color:var(--gold)}
#tutDots{display:flex;gap:7px;margin:2px 0 4px}
#tutDots span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22);
  transition:background .2s, transform .2s}
#tutDots span.on{background:var(--gold);transform:scale(1.25)}

@media (max-width:640px){
  :root{--card-w:54px;--card-h:78px;font-size:15px}
  #app{padding:6px 8px calc(4px + env(safe-area-inset-bottom))}
  header{flex-wrap:wrap;justify-content:center;gap:6px;padding:2px 0 6px}
  #stakeBadge{padding:5px 10px 5px 7px;gap:7px}
  #stakeChip{width:26px;height:26px;border-width:3px}
  #stakeName{font-size:.7rem}
  .hudBox{padding:4px 8px;border-radius:11px}
  .hudBox small{font-size:.48rem}
  #bank{font-size:1.05rem}
  #heatVal,#multVal{font-size:.85rem}
  #heatFx{font-size:.44rem}
  .iconBtn{width:36px;height:36px;font-size:.95rem;border-radius:10px}
  #goalWrap{padding:4px 10px 6px;margin-bottom:3px}
  #goalText{font-size:.62rem}
  #goalLabel{font-size:.5rem}
  #goalTrack{height:8px}
  #tableStatus{font-size:.58rem;padding:4px 10px 5px}
  .areaLabel{font-size:.5rem;letter-spacing:.18em}
  .betZone{width:62px;height:62px}
  .betZone .betAmt{margin-top:24px;font-size:.7rem}
  .miniChip{width:26px;height:26px;left:-13px;border-width:3px}
  .betZone .chipStack{bottom:24px}
  .lockTag{font-size:.44rem;bottom:-16px}
  #spots{gap:6px}
  .spot{min-width:calc(var(--card-w) * 1.7);padding:6px 4px 8px}
  .result{font-size:.72rem;min-height:1.1rem}
  .valBadge{min-width:36px;height:26px;font-size:.82rem}
  .chipBtn{width:44px;height:44px;font-size:.6rem;border-width:4px}
  #chipRow{gap:6px;margin-bottom:6px}
  .abSlot{width:46px;height:46px;font-size:1.2rem;border-radius:11px}
  .abSlot .key{font-size:.46rem}
  #abilityBar{gap:6px;padding:2px 0 4px}
  #abilityHint{font-size:.56rem}
  #chargePill{font-size:.54rem;padding:3px 10px 5px;margin-bottom:5px}
  .controlRow{gap:6px}
  .btn{padding:10px 11px 12px;border-radius:11px}
  .btn kbd{display:none}
  .btn.deal{padding:10px 18px 12px}
  #shoeBox{display:none}
  #title{display:none}
  #hintLine{display:none}
  #insText{font-size:.8rem}
  #insText .insAdvice{font-size:.62rem}
  #tutCard{padding:18px 16px 16px}
  #tutText{font-size:.78rem}
  .banner{font-size:clamp(1.5rem,9vw,2.6rem)}
}
@media (max-width:400px){
  :root{--card-w:46px;--card-h:66px}
  .betZone{width:54px;height:54px}
  .betZone .betAmt{margin-top:20px;font-size:.62rem}
  .miniChip{width:22px;height:22px;left:-11px}
  .betZone .chipStack{bottom:20px}
  .chipBtn{width:40px;height:40px;font-size:.54rem}
  .abSlot{width:42px;height:42px;font-size:1.05rem}
  .face .pip{font-size:1.7rem}
  .face .corner{font-size:.62rem}
  #multBox{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cardI,#title,#stakeChip{animation:none}
}