:root{--bg:#050508;--bg2:#0a0a10;--surf:#0e0e16;--card:#12121c;--card2:#181826;--border:#1e1e30;--bhi:#ff2030;--red:#ff1a2a;--redg:rgba(255,26,42,.25);--redd:#cc1420;--gold:#ffb020;--goldg:rgba(255,176,32,.2);--goldd:#cc8a10;--green:#00e870;--greeng:rgba(0,232,112,.2);--cyan:#00d4ff;--cyang:rgba(0,212,255,.15);--blue:#3388ff;--purple:#aa55ff;--pink:#ff4488;--white:#eaeaf0;--gray:#7878a0;--dim:#404060;--font:'Oxanium',sans-serif;--display:'Orbitron',sans-serif;--mono:'Fira Code',monospace}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background:var(--bg);color:var(--white);font-family:var(--font);overflow-x:hidden}button{font-family:var(--font);border:none;cursor:pointer;color:var(--white)}.hide{display:none!important}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes pop{0%{transform:scale(.1);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}@keyframes coinSpin{to{transform:rotateY(360deg)}}@keyframes shake{0%,100%{transform:translate(0)}25%{transform:translate(-3px,-1px) rotate(-1deg)}75%{transform:translate(3px,1px) rotate(1deg)}}@keyframes rocketUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes spinW{to{transform:rotate(360deg)}}@keyframes pulse{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.1)}}@keyframes breathe{0%,100%{opacity:.5;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}@keyframes particleFall{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes tileShine{0%{left:-100%}100%{left:200%}}@keyframes borderGlow{0%{border-color:var(--border)}50%{border-color:var(--red)}100%{border-color:var(--border)}}
#bg-effects{position:fixed;inset:0;pointer-events:none;z-index:0}.bg-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.06}.bg-orb-1{width:300px;height:300px;background:var(--red);top:-100px;left:-50px;animation:float 8s ease infinite}.bg-orb-2{width:250px;height:250px;background:var(--purple);bottom:100px;right:-80px;animation:float 6s ease 2s infinite}.bg-orb-3{width:200px;height:200px;background:var(--cyan);top:50%;left:50%;animation:float 10s ease 1s infinite}.bg-grid{position:fixed;inset:0;background-image:linear-gradient(var(--dim) 1px,transparent 1px),linear-gradient(90deg,var(--dim) 1px,transparent 1px);background-size:40px 40px;opacity:.03;pointer-events:none;z-index:0}
#app{max-width:420px;margin:0 auto;min-height:100vh;position:relative;z-index:1}.topbar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid var(--border);background:rgba(5,5,8,.85);backdrop-filter:blur(16px);position:sticky;top:0;z-index:100}.topbar-logo{display:flex;align-items:center;gap:8px;background:none;padding:0}.topbar-logo span:first-child{font-size:22px}.topbar-logo span:last-child{color:var(--red);font-weight:800;font-size:.95rem;letter-spacing:.06em;font-family:var(--display);text-shadow:0 0 20px var(--redg)}.bal-btn{background:linear-gradient(135deg,var(--card),var(--card2));border:1px solid rgba(255,176,32,.2);border-radius:12px;padding:8px 16px;display:flex;align-items:center;gap:8px;transition:.2s}.bal-btn:active{transform:scale(.95);border-color:var(--gold)}.bal-btn .amount{color:var(--gold);font-weight:800;font-size:1rem;font-family:var(--mono);text-shadow:0 0 10px var(--goldg)}
.bottomnav{position:fixed;bottom:0;left:0;right:0;background:rgba(5,5,8,.88);backdrop-filter:blur(16px);border-top:1px solid var(--border);display:flex;justify-content:center;gap:4px;padding:6px 12px 20px;max-width:420px;margin:0 auto;z-index:100}.nav-btn{flex:1;background:transparent;border:1px solid transparent;border-radius:10px;padding:8px 0;display:flex;flex-direction:column;align-items:center;gap:3px;transition:.2s}.nav-btn:active{transform:scale(.92)}.nav-btn.active{background:linear-gradient(180deg,rgba(255,26,42,.05),transparent);border-color:rgba(255,26,42,.15)}.nav-btn .icon{font-size:22px}.nav-btn .label{font-size:.65rem;font-weight:700;color:var(--dim);letter-spacing:.04em}.nav-btn.active .label{color:var(--red)}.page{padding:0 16px 100px;animation:fadeIn .3s ease}
.section{display:flex;align-items:center;gap:8px;margin:20px 0 12px}.section .title{color:var(--white);font-weight:700;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--display)}.section .line{flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)}.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tile{background:linear-gradient(160deg,var(--card2),var(--card),var(--surf));border:1px solid var(--border);border-radius:16px;padding:18px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;transition:all .2s;position:relative;overflow:hidden}.tile::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.03),transparent)}.tile:active::before{animation:tileShine .5s ease}.tile:active{transform:scale(.94);border-color:var(--red);box-shadow:0 0 20px var(--redg),0 4px 16px rgba(0,0,0,.5)}.tile .emoji{font-size:36px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}.tile .name{color:var(--white);font-weight:700;font-size:.9rem}.tile .sub{color:var(--gold);font-size:.7rem;font-weight:600}.tile .tag{position:absolute;top:6px;right:6px;background:var(--green);color:#000;font-size:.55rem;font-weight:800;padding:2px 7px;border-radius:5px}
.btn{border-radius:14px;padding:16px 0;font-weight:700;font-size:1rem;letter-spacing:.04em;transition:all .2s;width:100%;position:relative;overflow:hidden}.btn:active{transform:scale(.95)}.btn-red{background:linear-gradient(135deg,var(--red),var(--redd));color:#fff;box-shadow:0 4px 16px var(--redg)}.btn-gold{background:linear-gradient(135deg,var(--gold),var(--goldd));color:#000;box-shadow:0 4px 16px var(--goldg)}.btn-green{background:linear-gradient(135deg,var(--green),#00b858);color:#000;box-shadow:0 4px 16px var(--greeng)}.btn-blue{background:linear-gradient(135deg,var(--blue),#2266cc);color:#fff}.btn-purple{background:linear-gradient(135deg,var(--purple),#8833cc);color:#fff}.btn-cyan{background:linear-gradient(135deg,var(--cyan),#0099bb);color:#000}.btn-outline{background:var(--card);border:1px solid var(--dim);color:var(--gray)}.btn-disabled{opacity:.35;pointer-events:none}.btn-glow{animation:borderGlow 2s ease infinite}
.result-overlay{position:fixed;inset:0;z-index:999;background:rgba(5,5,8,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;animation:fadeIn .3s ease;backdrop-filter:blur(12px)}.result-emoji{font-size:88px;animation:pop .5s cubic-bezier(.3,1.5,.6,1)}.result-text{font-size:2.4rem;font-weight:900;font-family:var(--display);text-shadow:0 0 20px currentColor}.result-detail{color:var(--gray);font-size:.95rem;text-align:center;max-width:300px;line-height:1.5}.result-amount{background:var(--card);border-radius:16px;padding:16px 36px}.result-amount span{font-weight:800;font-size:2rem;font-family:var(--mono)}
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;gap:20px}.loading-dots{display:flex;gap:6px}.loading-dots div{width:8px;height:8px;border-radius:50%;background:var(--red)}.card-el{background:linear-gradient(145deg,var(--card2),var(--card));border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;min-width:40px;text-align:center;font-weight:800;font-family:var(--mono);font-size:1rem;box-shadow:0 4px 12px rgba(0,0,0,.5)}.card-hidden{background:linear-gradient(145deg,var(--red),var(--redd));color:transparent;border-color:rgba(255,26,42,.4)}.info-box{background:linear-gradient(135deg,var(--card),var(--surf));border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:12px;padding:14px 16px;margin:14px 0 6px}.info-box p{color:var(--gray);font-size:.82rem;line-height:1.7;margin:0}.info-box b{color:var(--gold)}.betgrid{display:flex;flex-direction:column;gap:8px;margin-top:14px}
@keyframes cylinderSpin{0%{transform:rotate(0)}100%{transform:rotate(2160deg)}} @keyframes muzzleFlash{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(3)}} @keyframes screenShake{0%,100%{transform:translate(0)}10%{transform:translate(-8px,4px)}20%{transform:translate(6px,-6px)}30%{transform:translate(-4px,8px)}40%{transform:translate(8px,-2px)}50%{transform:translate(-6px,6px)}60%{transform:translate(4px,-8px)}70%{transform:translate(-8px,2px)}80%{transform:translate(6px,6px)}90%{transform:translate(-2px,-4px)}} @keyframes sparkle{0%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(0)}} @keyframes rocketTrail{0%{bottom:0;opacity:1}100%{bottom:80%;opacity:0}} @keyframes coinFlip3D{0%{transform:perspective(400px) rotateY(0)}25%{transform:perspective(400px) rotateY(900deg)}50%{transform:perspective(400px) rotateY(1800deg)}75%{transform:perspective(400px) rotateY(2520deg)}100%{transform:perspective(400px) rotateY(3240deg) scale(1.2)}} @keyframes bombPulse{0%,100%{box-shadow:0 0 10px var(--red)}50%{box-shadow:0 0 40px var(--red),0 0 80px rgba(255,26,42,.3)}} @keyframes wireSpark{0%{opacity:1;width:0}50%{opacity:1;width:100%}100%{opacity:0;width:100%}} @keyframes explosion{0%{transform:scale(0);opacity:1;background:var(--gold)}50%{transform:scale(2);opacity:.8;background:var(--red)}100%{transform:scale(4);opacity:0;background:transparent}} @keyframes reelBlur{0%{filter:blur(0);transform:translateY(0)}50%{filter:blur(3px);transform:translateY(-20px)}100%{filter:blur(0);transform:translateY(0)}} @keyframes wheelSpin{0%{transform:rotate(0)}80%{transform:rotate(1800deg)}100%{transform:rotate(2160deg)}} @keyframes dropBounce{0%{transform:translateY(-100px);opacity:0}60%{transform:translateY(10px);opacity:1}80%{transform:translateY(-5px)}100%{transform:translateY(0)}} @keyframes pulseDanger{0%,100%{background:var(--card)}50%{background:rgba(255,26,42,.08)}} @keyframes countTick{0%{transform:translateY(10px);opacity:0}100%{transform:translateY(0);opacity:1}} @keyframes glowPulse{0%,100%{box-shadow:0 0 5px currentColor}50%{box-shadow:0 0 20px currentColor,0 0 40px currentColor}} .screen-shake{animation:screenShake .5s ease} .glass{background:rgba(18,18,28,.7)!important;backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.06)!important}
@keyframes bjDeal{0%{transform:translate(60px,-80px) rotateY(180deg) rotateZ(12deg);opacity:0}60%{opacity:1}100%{transform:translate(0,0) rotateY(0) rotateZ(0);opacity:1}}
@keyframes bjDealHidden{0%{transform:translate(60px,-80px) rotateZ(12deg);opacity:0}60%{opacity:1}100%{transform:translate(0,0) rotateZ(0);opacity:1}}
@keyframes bjFlip{0%{transform:rotateY(180deg)}100%{transform:rotateY(0deg)}}
.bj-table{background:radial-gradient(ellipse at center,#0d4028 0%,#072015 60%,#03120a 100%);border:1px solid #1a5030;border-radius:20px;padding:20px 16px;box-shadow:inset 0 0 40px rgba(0,0,0,.7),0 10px 30px rgba(0,0,0,.6);margin-bottom:14px;position:relative;overflow:visible}
.bj-table::before{content:"";position:absolute;inset:8px;border:1px dashed rgba(232,168,32,.2);border-radius:16px;pointer-events:none;z-index:0}
.bj-label{color:rgba(232,168,32,.85);font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:10px;text-shadow:0 0 8px rgba(255,176,32,.4);display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}
.bj-score{background:rgba(0,0,0,.5);color:var(--gold);padding:3px 10px;border-radius:10px;font-family:var(--mono);font-size:.78rem;border:1px solid rgba(232,168,32,.3)}
.bj-row{display:flex;justify-content:center;perspective:800px;min-height:130px;align-items:center;padding:0 14px 0 42px;position:relative;z-index:1}
.bj-card{width:84px;height:120px;border-radius:10px;position:relative;transform-style:preserve-3d;margin-left:-28px;flex-shrink:0;filter:drop-shadow(0 6px 12px rgba(0,0,0,.6))}
.bj-card:first-child{margin-left:0}
.bj-card.dealt{animation:bjDeal .55s cubic-bezier(.2,.9,.3,1.2) both}
.bj-card.dealt-hidden{animation:bjDealHidden .55s cubic-bezier(.2,.9,.3,1.2) both}
.bj-card.flipping{animation:bjFlip .6s cubic-bezier(.4,.1,.2,1) both}
.bj-face,.bj-back{position:absolute;inset:0;border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:8px 10px}
.bj-face{background:linear-gradient(160deg,#fafafa,#e4e4ec);border:1px solid #c0c0d0;box-shadow:inset 0 1px 0 #fff,inset 0 -2px 4px rgba(0,0,0,.1)}
.bj-back{background:linear-gradient(135deg,#c01030 0%,#800818 50%,#c01030 100%);border:1px solid #400008;transform:rotateY(180deg);box-shadow:inset 0 0 0 3px rgba(255,255,255,.13),inset 0 0 0 4px #400008}
.bj-back::after{content:"♠";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.13);font-size:42px;text-shadow:0 0 10px #000}
.bj-rank{font-family:var(--mono);font-weight:900;font-size:1.25rem;line-height:1}
.bj-rank.r{color:#d01020}.bj-rank.b{color:#0a0a18}
.bj-suit-tl{font-size:.95rem;line-height:1}
.bj-suit-big{align-self:center;font-size:2.2rem;margin:-4px 0}
.bj-corner{display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.bj-corner.br{transform:rotate(180deg);align-self:flex-end}
/* ── Coin Flip 3D ── */
@keyframes cfSpin{0%{transform:rotateY(0deg)}100%{transform:rotateY(1800deg)}}
@keyframes cfRise{0%{transform:translateY(40px) scale(.7);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes cfResult{0%{transform:scale(.5) rotateY(90deg);opacity:0}60%{transform:scale(1.08) rotateY(0deg);opacity:1}100%{transform:scale(1) rotateY(0deg);opacity:1}}
.cf-stage{background:radial-gradient(ellipse at 50% 80%,#1a1208 0%,#0a0a0f 70%);border:1px solid rgba(255,176,32,.15);border-radius:24px;padding:28px 16px 20px;position:relative;overflow:hidden;margin-bottom:14px;box-shadow:inset 0 0 60px rgba(0,0,0,.8),0 10px 40px rgba(0,0,0,.7)}
.cf-stage::before{content:;position:absolute;inset:10px;border:1px dashed rgba(255,176,32,.1);border-radius:18px;pointer-events:none}
.cf-stage::after{content:;position:absolute;bottom:0;left:0;right:0;height:60px;background:radial-gradient(ellipse at 50% 100%,rgba(255,176,32,.08) 0%,transparent 70%);pointer-events:none}
.cf-coin-wrap{perspective:600px;width:120px;height:120px;margin:0 auto 10px;position:relative;z-index:1}
.cf-coin{width:120px;height:120px;position:relative;transform-style:preserve-3d;filter:drop-shadow(0 8px 20px rgba(0,0,0,.7));will-change:transform}
.cf-face,.cf-tail{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px}
.cf-face{background:radial-gradient(circle at 35% 35%,#ffe066,#e8a000 50%,#b87800 100%);border:3px solid rgba(255,220,80,.5);box-shadow:inset 0 2px 4px rgba(255,255,255,.4),inset 0 -2px 4px rgba(0,0,0,.3)}
.cf-tail{background:radial-gradient(circle at 35% 35%,#d8e8f0,#8899b0 50%,#556070 100%);border:3px solid rgba(200,220,240,.4);box-shadow:inset 0 2px 4px rgba(255,255,255,.3),inset 0 -2px 4px rgba(0,0,0,.4);transform:rotateY(180deg)}
.cf-symbol{font-size:38px;line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.cf-clabel{font-size:.45rem;font-weight:900;letter-spacing:.2em;text-transform:uppercase}
.cf-face .cf-clabel{color:#7a5000}.cf-tail .cf-clabel{color:#3a4f60}
.cf-status{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,176,32,.7);text-align:center;min-height:18px}
.cf-result-badge{animation:cfResult .5s cubic-bezier(.2,1.4,.4,1) both;text-align:center}
.cf-pick-btn{border-radius:18px;padding:22px 0;font-weight:800;font-size:1.05rem;letter-spacing:.06em;transition:all .2s;border:2px solid transparent;width:100%}
.cf-pick-btn:active{transform:scale(.94)}
.cf-pick-btn.heads{background:linear-gradient(135deg,#e8a000,#b87800);color:#fff;border-color:rgba(255,220,80,.3);box-shadow:0 6px 24px rgba(184,120,0,.4)}
.cf-pick-btn.tails{background:linear-gradient(135deg,#4488cc,#224488);color:#fff;border-color:rgba(100,160,220,.3);box-shadow:0 6px 24px rgba(34,68,136,.5)}

/* ── Dice flat premium ── */
@keyframes diceFaceIn{0%{transform:scale(.65) rotate(-8deg);opacity:0}60%{transform:scale(1.06) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0deg);opacity:1}}
@keyframes diceLandBounce{0%{transform:scale(1.18) rotate(-3deg)}40%{transform:scale(.93) rotate(1deg)}70%{transform:scale(1.05) rotate(0deg)}100%{transform:scale(1) rotate(0deg)}}
@keyframes diceWinPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,232,112,0),0 12px 40px rgba(0,0,0,.7)}50%{box-shadow:0 0 0 12px rgba(0,232,112,.15),0 12px 40px rgba(0,0,0,.7)}}
@keyframes diceLosePulse{0%,100%{box-shadow:0 0 0 0 rgba(255,26,42,0),0 12px 40px rgba(0,0,0,.7)}50%{box-shadow:0 0 0 12px rgba(255,26,42,.15),0 12px 40px rgba(0,0,0,.7)}}
.dice-stage{background:radial-gradient(ellipse at 50% 60%,#141014 0%,#080609 70%);border:1px solid rgba(255,176,32,.12);border-radius:24px;padding:28px 16px 22px;position:relative;overflow:hidden;margin-bottom:14px;box-shadow:inset 0 0 80px rgba(0,0,0,.9),0 10px 40px rgba(0,0,0,.7)}
.dice-stage::before{content:"";position:absolute;inset:10px;border:1px dashed rgba(255,176,32,.08);border-radius:18px;pointer-events:none}
.dice-wrap{width:150px;height:150px;margin:0 auto 14px;position:relative;z-index:1}
.dice-face-el{width:150px;height:150px;border-radius:22px;background:linear-gradient(145deg,#f5f5f8 0%,#e8e8f0 40%,#d8d8e4 100%);border:2px solid rgba(255,255,255,.9);box-shadow:inset 0 3px 8px rgba(255,255,255,.7),inset 0 -3px 8px rgba(0,0,0,.12),0 12px 40px rgba(0,0,0,.7),0 4px 12px rgba(0,0,0,.5);display:grid;padding:18px;box-sizing:border-box;position:absolute;inset:0}
.dice-face-el.animating{animation:diceFaceIn .14s cubic-bezier(.2,.9,.3,1.1) both}
.dice-face-el.landing{animation:diceLandBounce .42s cubic-bezier(.2,1.3,.3,1) both}
.dice-face-el.win{animation:diceWinPulse 1s ease infinite;background:linear-gradient(145deg,#f0faf0,#dff0df)}
.dice-face-el.lose{animation:diceLosePulse 1s ease infinite;background:linear-gradient(145deg,#faf0f0,#f0dfdf)}
.dp2{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#4455cc,#1a2280);box-shadow:inset 0 2px 4px rgba(255,255,255,.2),0 2px 6px rgba(0,0,0,.5);flex-shrink:0}
.dp2.red{background:radial-gradient(circle at 38% 32%,#cc2233,#881020)}
.dp2.invis{visibility:hidden}
.dice-status{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,176,32,.6);text-align:center;min-height:18px}
.dice-pick-btn{background:linear-gradient(145deg,#1a1520,#100e16);border:2px solid rgba(255,176,32,.15);border-radius:14px;padding:18px 0;font-weight:800;font-size:1.3rem;font-family:var(--display);color:var(--white);transition:all .18s;width:100%}
.dice-pick-btn:active{transform:scale(.91);border-color:var(--gold);background:linear-gradient(145deg,#1e1a08,#14120a)}
.dice-pick-btn.selected{border-color:var(--gold);background:linear-gradient(145deg,#1e1a08,#14120a);box-shadow:0 0 20px rgba(255,176,32,.25);color:var(--gold)}

/* ── Mines ── */
@keyframes mineRevealSafe{0%{transform:scale(0) rotate(-10deg);opacity:0}65%{transform:scale(1.15) rotate(2deg)}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes mineRevealBoom{0%{transform:scale(1)}20%{transform:scale(1.4)}60%{transform:scale(.9)}100%{transform:scale(1)}}
@keyframes mineSelect{0%{transform:scale(1)}50%{transform:scale(.88)}100%{transform:scale(1)}}
@keyframes mineIdle{0%,100%{box-shadow:inset 0 2px 4px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3)}50%{box-shadow:inset 0 2px 4px rgba(0,0,0,.4),0 2px 16px rgba(255,176,32,.1)}}
.mines-vault{background:radial-gradient(ellipse at 50% 30%,#0a1a0a 0%,#050a05 70%);border:1px solid rgba(0,200,80,.12);border-radius:20px;padding:16px;position:relative;overflow:hidden;margin-bottom:12px;box-shadow:inset 0 0 60px rgba(0,0,0,.8),0 8px 30px rgba(0,0,0,.7)}
.mines-vault::before{content:"";position:absolute;inset:8px;border:1px dashed rgba(0,200,80,.08);border-radius:14px;pointer-events:none}
.mines-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;max-width:300px;margin:0 auto}
.mine-cell{aspect-ratio:1;border-radius:10px;border:1.5px solid rgba(255,255,255,.08);background:linear-gradient(145deg,#1a1e1a,#111411);box-shadow:inset 0 2px 4px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;transition:border-color .15s,background .15s;position:relative;user-select:none;-webkit-user-select:none}
.mine-cell:active{transform:scale(.9)}
.mine-cell.selected{background:linear-gradient(145deg,#0a2a14,#061a0c);border-color:rgba(0,220,100,.5);box-shadow:inset 0 2px 4px rgba(0,0,0,.4),0 0 12px rgba(0,200,80,.2);animation:mineSelect .18s ease}
.mine-cell.selected::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--green);font-size:16px;font-weight:900}
.mine-cell.safe{background:linear-gradient(145deg,#0a2a14,#061a0c);border-color:var(--green);animation:mineRevealSafe .35s cubic-bezier(.2,1.3,.4,1) both;cursor:default}
.mine-cell.boom{background:linear-gradient(145deg,#2a0a0a,#1a0606);border-color:var(--red);animation:mineRevealBoom .4s ease;cursor:default}
.mine-cell.mine-show{background:rgba(255,26,42,.12);border-color:rgba(255,26,42,.3);cursor:default}
.mine-cell.idle{animation:mineIdle 2s ease infinite}
.mines-hud{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding:0 2px}
.mines-mult{font-family:var(--mono);font-size:1.5rem;font-weight:900;color:var(--gold);text-shadow:0 0 12px rgba(255,176,32,.4);transition:all .2s}
.mines-mult.updated{animation:countTick .25s ease}
.mines-counter{font-size:.68rem;font-weight:700;letter-spacing:.15em;color:rgba(0,200,80,.7);text-transform:uppercase}
.mines-diff-btn{border-radius:12px;padding:14px 0;font-weight:700;font-size:.85rem;border:2px solid transparent;transition:all .18s;width:100%}
.mines-diff-btn.easy{background:linear-gradient(135deg,#063a14,#04260d);border-color:rgba(0,200,80,.2);color:var(--green)}
.mines-diff-btn.medium{background:linear-gradient(135deg,#2a2000,#1a1400);border-color:rgba(255,176,32,.2);color:var(--gold)}
.mines-diff-btn.hard{background:linear-gradient(135deg,#2a0606,#1a0404);border-color:rgba(255,26,42,.2);color:var(--red)}
.mines-diff-btn:active{transform:scale(.94)}

/* ── Plinko ── */
@keyframes plinkoBallDrop{0%{transform:translateY(-18px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes plinkoLand{0%{transform:scale(1.5);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes plinkoBucketLight{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes plinkoWinBucket{0%{transform:scaleY(1)}30%{transform:scaleY(1.18)}60%{transform:scaleY(.92)}100%{transform:scaleY(1)}}
.plinko-board{background:radial-gradient(ellipse at 50% 20%,#0a0a18 0%,#04040c 70%);border:1px solid rgba(100,80,200,.18);border-radius:20px;padding:14px 10px 10px;position:relative;overflow:hidden;margin-bottom:12px;box-shadow:inset 0 0 60px rgba(0,0,0,.9),0 8px 30px rgba(0,0,0,.7)}
.plinko-board::before{content:"";position:absolute;inset:8px;border:1px dashed rgba(100,80,200,.1);border-radius:14px;pointer-events:none}
.plinko-canvas{display:block;margin:0 auto}
.plinko-buckets{display:flex;gap:2px;margin:6px auto 0;max-width:340px}
.plinko-bucket{flex:1;border-radius:6px 6px 8px 8px;padding:5px 0;text-align:center;font-family:var(--mono);font-size:.58rem;font-weight:800;transition:all .2s;position:relative;overflow:hidden}
.plinko-bucket.low-risk{background:rgba(0,200,80,.08);border:1px solid rgba(0,200,80,.15);color:rgba(0,200,80,.7)}
.plinko-bucket.med-risk{background:rgba(255,176,32,.08);border:1px solid rgba(255,176,32,.15);color:rgba(255,176,32,.7)}
.plinko-bucket.high-risk{background:rgba(255,50,30,.08);border:1px solid rgba(255,50,30,.15);color:rgba(255,50,30,.7)}
.plinko-bucket.lit{animation:plinkoWinBucket .4s cubic-bezier(.2,1.3,.4,1);box-shadow:0 0 16px currentColor}
.plinko-risk-btn{border-radius:14px;padding:14px 0;font-weight:800;font-size:.88rem;transition:all .18s;width:100%;border:2px solid transparent}
.plinko-risk-btn.active-low{background:linear-gradient(135deg,#063a14,#04260d);border-color:rgba(0,200,80,.4);color:var(--green)}
.plinko-risk-btn.active-med{background:linear-gradient(135deg,#2a2000,#1a1400);border-color:rgba(255,176,32,.4);color:var(--gold)}
.plinko-risk-btn.active-high{background:linear-gradient(135deg,#2a0606,#1a0404);border-color:rgba(255,50,30,.4);color:var(--red)}
.plinko-risk-btn.inactive{background:var(--card);border-color:var(--border);color:var(--gray)}
.plinko-risk-btn:active{transform:scale(.93)}

/* ── Russian Roulette ── */
@keyframes roulCylinderSpin{0%{transform:rotate(0)}100%{transform:rotate(1800deg)}}
@keyframes roulCylinderSettle{0%{transform:rotate(var(--spin-end)) scale(1.04)}60%{transform:rotate(var(--spin-end)) scale(.97)}100%{transform:rotate(var(--spin-end)) scale(1)}}
@keyframes roulPulse{0%,100%{opacity:.5;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
@keyframes roulMuzzle{0%{opacity:1;transform:scale(1) translate(-50%,-50%)}100%{opacity:0;transform:scale(4) translate(-50%,-50%)}}
@keyframes roulClick{0%{transform:scale(1)}40%{transform:scale(.9)}100%{transform:scale(1)}}
.roul-arena{background:radial-gradient(ellipse at 50% 40%,#1a0808 0%,#0a0404 70%);border:1px solid rgba(200,50,30,.18);border-radius:24px;padding:24px 16px 20px;position:relative;overflow:hidden;margin-bottom:14px;box-shadow:inset 0 0 80px rgba(0,0,0,.9),0 10px 40px rgba(0,0,0,.8)}
.roul-arena::before{content:"";position:absolute;inset:10px;border:1px dashed rgba(200,50,30,.1);border-radius:18px;pointer-events:none}
.roul-cylinder-wrap{width:160px;height:160px;margin:0 auto 14px;position:relative}
.roul-cylinder{width:160px;height:160px;border-radius:50%;position:relative;background:radial-gradient(circle at 40% 35%,#3a3a4a,#18181e);border:3px solid #2a2a38;box-shadow:inset 0 4px 12px rgba(0,0,0,.6),inset 0 -2px 8px rgba(255,255,255,.04),0 8px 24px rgba(0,0,0,.7);will-change:transform}
.roul-cylinder.spinning{animation:roulCylinderSpin 1.8s cubic-bezier(.4,0,.1,1) forwards}
.roul-chamber{position:absolute;width:30px;height:30px;border-radius:50%}
.roul-chamber-inner{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#2e2e3e,#0e0e16);border:2px solid #3a3a52;box-shadow:inset 0 2px 5px rgba(0,0,0,.9),inset 0 -1px 2px rgba(255,255,255,.05)}
.roul-chamber.loaded .roul-chamber-inner{background:radial-gradient(circle at 38% 32%,#cc2828,#6a0a0a);border-color:#dd3030;box-shadow:inset 0 2px 4px rgba(0,0,0,.5),0 0 10px rgba(255,40,40,.5),0 0 20px rgba(255,40,40,.2)}
.roul-barrel{width:20px;height:50px;background:linear-gradient(180deg,#2a2a38,#1a1a24);border-radius:4px 4px 8px 8px;margin:0 auto;border:1px solid #3a3a50;box-shadow:0 4px 12px rgba(0,0,0,.6)}
.roul-status{font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;text-align:center;min-height:22px;transition:all .3s}
.roul-bullet-btn{border-radius:16px;padding:16px 0;font-weight:800;font-size:.9rem;letter-spacing:.04em;transition:all .18s;width:100%;border:2px solid transparent;position:relative;overflow:hidden}
.roul-bullet-btn:active{transform:scale(.93)}
.roul-bullet-btn.b1{background:linear-gradient(135deg,#063a14,#04260d);border-color:rgba(0,200,80,.3);color:var(--green)}
.roul-bullet-btn.b2{background:linear-gradient(135deg,#2a2000,#1a1400);border-color:rgba(255,176,32,.3);color:var(--gold)}
.roul-bullet-btn.b3{background:linear-gradient(135deg,#2a0808,#1a0404);border-color:rgba(255,50,30,.35);color:var(--red)}
.roul-bullet-btn.selected{box-shadow:0 0 20px currentColor}

/* ── Spin Wheel ── */
@keyframes spinWheelRoll{0%{transform:rotate(0deg)}100%{transform:rotate(var(--sw-end))}}
@keyframes spinPointerBounce{0%,100%{transform:translateY(0) rotate(180deg)}40%{transform:translateY(6px) rotate(180deg)}}
@keyframes spinSegmentPop{0%{opacity:.6;transform:scale(.97)}60%{opacity:1;transform:scale(1.02)}100%{opacity:1;transform:scale(1)}}
@keyframes spinResultPop{0%{transform:scale(0) rotate(-10deg);opacity:0}60%{transform:scale(1.1) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
.spin-stage{background:radial-gradient(ellipse at 50% 35%,#100818 0%,#060410 70%);border:1px solid rgba(200,140,255,.18);border-radius:24px;padding:22px 16px 18px;position:relative;overflow:hidden;margin-bottom:14px;box-shadow:inset 0 0 80px rgba(0,0,0,.95),0 12px 50px rgba(0,0,0,.8)}
.spin-stage::before{content:"";position:absolute;inset:10px;border:1px dashed rgba(200,140,255,.07);border-radius:18px;pointer-events:none}
.spin-wheel-wrap{position:relative;width:300px;height:300px;margin:0 auto}
.spin-canvas{display:block;filter:drop-shadow(0 12px 32px rgba(0,0,0,.9)) drop-shadow(0 0 20px rgba(160,80,255,.2))}
.spin-pointer{position:absolute;top:-4px;left:50%;transform:translateX(-50%);z-index:10;width:24px;height:36px}
.spin-pointer::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:32px solid #fff;filter:drop-shadow(0 2px 8px rgba(0,0,0,.8))}
.spin-pointer::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:4px;height:14px;background:linear-gradient(180deg,#ffee88,#cc9900);border-radius:2px;margin-left:-2px}
.spin-center-cap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#f8f4e8,#b8a870 40%,#7a6830 100%);border:3px solid rgba(255,230,120,.5);box-shadow:0 3px 12px rgba(0,0,0,.7),inset 0 1px 3px rgba(255,255,255,.5),0 0 16px rgba(255,200,60,.2);z-index:10}
.spin-status{font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;text-align:center;min-height:22px;margin-top:12px;transition:all .3s}
.spin-result-badge{animation:spinResultPop .4s cubic-bezier(.2,1.3,.4,1) both;display:inline-block}

/* ═══ ARCADE DOORS — themed hallway with 3D swinging doors ═══ */
@keyframes drDealIn{0%{transform:translateY(24px) rotateX(20deg);opacity:0}100%{transform:translateY(0) rotateX(0);opacity:1}}
@keyframes drRumble{0%,100%{transform:translate(0,0)}20%{transform:translate(-2px,1px)}40%{transform:translate(2px,-1px)}60%{transform:translate(-1px,2px)}80%{transform:translate(1px,-2px)}}
@keyframes drSwingOpen{0%{transform:rotateY(0)}30%{transform:rotateY(-8deg)}100%{transform:rotateY(-108deg)}}
@keyframes drSwingWrong{0%{transform:rotateY(0)}100%{transform:rotateY(-95deg)}}
@keyframes drGoldBurst{0%{opacity:0;transform:scale(.3)}40%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
@keyframes drGoldShine{0%,100%{filter:brightness(1) drop-shadow(0 0 8px #ffd060)}50%{filter:brightness(1.35) drop-shadow(0 0 20px #ffe090)}}
@keyframes drSpotlight{0%,100%{opacity:.55}50%{opacity:.85}}
@keyframes drHallwayFlicker{0%,92%,100%{opacity:1}94%{opacity:.7}96%{opacity:1}98%{opacity:.85}}
@keyframes drLockPulse{0%,100%{box-shadow:0 0 8px rgba(255,176,32,.2),inset 0 1px 0 rgba(255,255,255,.1)}50%{box-shadow:0 0 20px rgba(255,176,32,.55),inset 0 1px 0 rgba(255,255,255,.2)}}
@keyframes drRedFlash{0%,100%{background:transparent}50%{background:rgba(255,26,42,.12)}}
@keyframes drCountUp{0%{transform:translateY(8px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes drGreedGlow{0%,100%{box-shadow:0 4px 16px var(--greeng),0 0 0 rgba(255,176,32,0)}50%{box-shadow:0 4px 22px rgba(0,232,112,.4),0 0 28px rgba(255,176,32,.35)}}
@keyframes drDangerShake{0%,100%{transform:translate(0,0)}25%{transform:translate(-1px,0)}75%{transform:translate(1px,0)}}

.dr-stage{
  background:radial-gradient(ellipse at 50% 30%,#2a1d10 0%,#140c06 55%,#060402 100%);
  border:1px solid #3a2818;border-radius:20px;padding:18px 14px 22px;
  box-shadow:inset 0 0 60px rgba(0,0,0,.85),0 10px 30px rgba(0,0,0,.7);
  margin-bottom:14px;position:relative;overflow:hidden;
  animation:drHallwayFlicker 6s ease-in-out infinite
}
.dr-stage::before{
  content:"";position:absolute;inset:8px;
  border:1px dashed rgba(232,168,32,.22);border-radius:16px;
  pointer-events:none;z-index:1
}
.dr-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse at 15% 0%,rgba(255,200,120,.1) 0%,transparent 30%),
    radial-gradient(ellipse at 85% 0%,rgba(255,200,120,.1) 0%,transparent 30%),
    repeating-linear-gradient(180deg,transparent 0,transparent 3px,rgba(255,255,255,.01) 3px,rgba(255,255,255,.01) 4px);
  animation:drSpotlight 4s ease-in-out infinite
}
.dr-stage.losing{animation:drRedFlash .6s ease 2}
.dr-label{
  color:rgba(232,168,32,.85);font-size:.68rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px;
  text-shadow:0 0 8px var(--goldg);display:flex;
  justify-content:space-between;align-items:center;
  position:relative;z-index:2
}
.dr-score{
  background:rgba(0,0,0,.55);color:var(--gold);padding:3px 10px;
  border-radius:10px;font-family:var(--mono);font-size:.78rem;
  border:1px solid rgba(232,168,32,.3)
}
.dr-grid{
  display:grid;gap:10px;perspective:900px;position:relative;z-index:2;
  justify-content:center
}
.dr-grid.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dr-grid.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.dr-grid.n5{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.dr-grid.n6{grid-template-columns:repeat(3,minmax(0,1fr))}
.dr-grid.n7{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}

.dr-door{
  position:relative;aspect-ratio:.62/1;min-height:104px;
  border-radius:6px 6px 3px 3px;cursor:pointer;background:transparent;
  padding:0;border:none;
  transform-style:preserve-3d;perspective:700px;
  animation:drDealIn .45s cubic-bezier(.2,.9,.3,1.2) both;
  transition:transform .15s
}
.dr-door:active:not(.opened):not(.locked){transform:scale(.96)}
.dr-door.locked{cursor:default;opacity:.85}

/* Doorway frame — always visible, reveals "room" behind when door opens */
.dr-frame{
  position:absolute;inset:0;border-radius:6px 6px 3px 3px;
  background:
    linear-gradient(180deg,#0a0604 0%,#1a0f06 60%,#080402 100%);
  border:2px solid #2a1a08;
  box-shadow:
    inset 0 0 18px rgba(0,0,0,.95),
    inset 0 2px 0 rgba(255,200,120,.08),
    0 4px 10px rgba(0,0,0,.7);
  overflow:hidden
}
/* Empty room behind the door (visible on loss reveal) */
.dr-room-empty{
  position:absolute;inset:4px;border-radius:4px;
  background:radial-gradient(ellipse at center top,#1a0404 0%,#0a0202 60%,#000 100%);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;opacity:0;transition:opacity .3s ease .25s
}
.dr-door.opened.empty .dr-room-empty{opacity:1}
/* Gold room behind the winning door */
.dr-room-gold{
  position:absolute;inset:4px;border-radius:4px;
  background:radial-gradient(ellipse at center,#ffe180 0%,#c89020 45%,#402810 100%);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .3s ease .25s;
  box-shadow:inset 0 0 30px rgba(255,220,120,.8)
}
.dr-room-gold .dr-gold-icon{
  font-size:2.2rem;animation:drGoldShine 1.2s ease-in-out infinite;
  filter:drop-shadow(0 0 12px #ffd060)
}
.dr-door.opened.gold .dr-room-gold{opacity:1;animation:drGoldBurst .5s ease .2s both}

/* The actual swinging door panel */
.dr-panel{
  position:absolute;inset:0;border-radius:5px 5px 2px 2px;
  background:
    linear-gradient(180deg,#6a3d1a 0%,#4a2810 50%,#3a1e08 100%);
  border:1.5px solid #2a1604;
  box-shadow:
    inset 0 0 0 1px rgba(255,200,120,.08),
    inset 2px 0 4px rgba(0,0,0,.5),
    inset -2px 0 4px rgba(0,0,0,.5),
    0 2px 6px rgba(0,0,0,.6);
  transform-origin:left center;
  transition:transform .1s;
  backface-visibility:hidden
}
.dr-panel::before{
  /* wood-panel inset detail */
  content:"";position:absolute;inset:8px 6px;
  border:1.5px solid rgba(255,200,120,.12);
  border-radius:2px;
  background:linear-gradient(180deg,rgba(255,200,120,.04),transparent)
}
.dr-panel::after{
  /* door handle */
  content:"";position:absolute;right:6px;top:50%;
  width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#ffd880,#b08830 60%,#604018);
  box-shadow:0 0 4px rgba(255,200,120,.5),0 1px 2px rgba(0,0,0,.8);
  transform:translateY(-50%)
}
.dr-number{
  position:absolute;top:8px;left:0;right:0;text-align:center;
  font-family:var(--mono);font-weight:900;font-size:.95rem;
  color:#ffd880;text-shadow:0 0 6px rgba(255,176,32,.5),0 1px 0 #000;
  letter-spacing:.05em;z-index:1
}
.dr-lock{
  position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  width:14px;height:14px;border-radius:3px;
  background:linear-gradient(180deg,#ffd880,#b08830);
  border:1px solid #604018;z-index:1;
  animation:drLockPulse 2s ease-in-out infinite
}
.dr-lock::before{
  content:"";position:absolute;top:-4px;left:3px;width:8px;height:6px;
  border:1.5px solid #b08830;border-bottom:none;border-radius:4px 4px 0 0
}
.dr-door.rumbling .dr-panel{animation:drRumble .28s ease-in-out}
.dr-door.opened .dr-panel{animation:drSwingOpen .65s cubic-bezier(.5,.1,.3,1) forwards}
.dr-door.opened.empty .dr-panel{animation:drSwingWrong .55s cubic-bezier(.4,.1,.4,1) forwards}
.dr-door.opened .dr-number,.dr-door.opened .dr-lock{opacity:0;transition:opacity .2s}

/* Progress rail — round dots */
.dr-rail{
  display:flex;justify-content:space-between;align-items:center;gap:6px;
  background:linear-gradient(135deg,var(--card),var(--surf));
  border:1px solid var(--border);border-radius:14px;
  padding:10px 14px;margin-bottom:12px
}
.dr-rail-dots{display:flex;gap:6px;align-items:center}
.dr-dot{
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.62rem;font-weight:800;font-family:var(--mono);
  border:1.5px solid var(--dim);background:var(--surf);color:var(--dim);
  transition:all .3s
}
.dr-dot.done{
  background:linear-gradient(135deg,var(--gold),var(--goldd));
  border-color:var(--gold);color:#000;
  box-shadow:0 0 8px var(--goldg)
}
.dr-dot.current{
  background:linear-gradient(135deg,var(--green),#00a050);
  border-color:var(--green);color:#000;
  animation:drLockPulse 1.2s ease-in-out infinite;
  transform:scale(1.15)
}
.dr-dot.locked::before{content:"🔒";font-size:.55rem}
.dr-rail-mult{
  color:var(--gold);font-family:var(--mono);font-weight:900;font-size:1.1rem;
  text-shadow:0 0 10px var(--goldg)
}
.dr-rail-meta{color:var(--gray);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}

/* Side-by-side cash-out vs push panel */
.dr-stakes{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 10px
}
.dr-stake{
  border-radius:12px;padding:10px 12px;text-align:center;
  border:1px solid var(--border);background:var(--card)
}
.dr-stake.now{
  border-color:rgba(0,232,112,.35);
  background:linear-gradient(135deg,rgba(0,232,112,.08),var(--card))
}
.dr-stake.next{
  border-color:rgba(255,176,32,.3);
  background:linear-gradient(135deg,rgba(255,176,32,.06),var(--card))
}
.dr-stake-label{
  font-size:.6rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray);margin-bottom:4px
}
.dr-stake.now .dr-stake-label{color:var(--green)}
.dr-stake.next .dr-stake-label{color:var(--gold)}
.dr-stake-val{
  font-family:var(--mono);font-weight:800;font-size:1.05rem;
  color:var(--white);animation:drCountUp .35s ease both
}
.dr-stake.now .dr-stake-val{color:var(--green)}
.dr-stake.next .dr-stake-val{color:var(--gold)}
.dr-stake-sub{font-size:.6rem;color:var(--dim);font-family:var(--mono);margin-top:2px}

.dr-cashout{animation:drGreedGlow 1.8s ease-in-out infinite}
.dr-cashout.tempting{animation:drGreedGlow 1s ease-in-out infinite,drDangerShake .4s ease-in-out infinite}

.dr-session{
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(0,0,0,.35);border:1px solid var(--border);
  border-radius:10px;padding:6px 12px;margin-bottom:10px;
  font-size:.65rem;letter-spacing:.08em;color:var(--gray);text-transform:uppercase
}
.dr-session b{color:var(--gold);font-family:var(--mono);font-size:.85rem;margin-left:4px}

.dr-hint{
  text-align:center;color:rgba(232,168,32,.7);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;margin-top:8px;
  font-weight:600;position:relative;z-index:2
}

/* ═══ ARCADE HI/LO — purple felt table, 3D cards with suits, reveal flip ═══ */
@keyframes hlDealIn{
  0%{transform:translate(140px,-180px) rotateY(180deg) rotateZ(18deg);opacity:0}
  55%{opacity:1}
  100%{transform:translate(0,0) rotateY(0) rotateZ(0);opacity:1}
}
@keyframes hlDealFaceDown{
  0%{transform:translate(140px,-180px) rotateZ(18deg);opacity:0}
  55%{opacity:1}
  100%{transform:translate(0,0) rotateZ(0);opacity:1}
}
@keyframes hlFlipReveal{
  0%{transform:rotateY(180deg)}
  100%{transform:rotateY(0deg)}
}
@keyframes hlSlideLast{
  0%{transform:translate(0,0) scale(1);filter:none}
  100%{transform:translate(-60px,0) scale(.82);filter:saturate(.5) brightness(.65)}
}
@keyframes hlResultFlashWin{
  0%,100%{box-shadow:0 0 0 rgba(0,232,112,0)}
  50%{box-shadow:0 0 0 6px rgba(0,232,112,.25),0 0 40px rgba(0,232,112,.4)}
}
@keyframes hlResultFlashLose{
  0%,100%{box-shadow:0 0 0 rgba(255,26,42,0)}
  50%{box-shadow:0 0 0 6px rgba(255,26,42,.3),0 0 40px rgba(255,26,42,.5)}
}
@keyframes hlBadgePop{
  0%{transform:translate(-50%,-50%) scale(.3);opacity:0}
  60%{transform:translate(-50%,-50%) scale(1.15);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1);opacity:1}
}
@keyframes hlTableGlow{
  0%,100%{box-shadow:inset 0 0 40px rgba(0,0,0,.7),0 10px 30px rgba(0,0,0,.6)}
  50%{box-shadow:inset 0 0 60px rgba(170,85,255,.15),0 10px 30px rgba(0,0,0,.6)}
}
@keyframes hlOddsBarFill{
  0%{width:0}
  100%{width:var(--hl-fill)}
}
@keyframes hlGreedGlow{
  0%,100%{box-shadow:0 4px 16px var(--greeng),0 0 0 rgba(255,176,32,0)}
  50%{box-shadow:0 4px 22px rgba(0,232,112,.4),0 0 28px rgba(255,176,32,.35)}
}
@keyframes hlDangerShake{0%,100%{transform:translate(0,0)}25%{transform:translate(-1px,0)}75%{transform:translate(1px,0)}}

.hl-table{
  background:radial-gradient(ellipse at center,#2a0f45 0%,#150722 55%,#080312 100%);
  border:1px solid #4a2070;border-radius:20px;padding:18px 14px 20px;
  box-shadow:inset 0 0 40px rgba(0,0,0,.7),0 10px 30px rgba(0,0,0,.6);
  margin-bottom:14px;position:relative;overflow:visible;
  animation:hlTableGlow 4s ease-in-out infinite
}
.hl-table::before{
  content:"";position:absolute;inset:8px;
  border:1px dashed rgba(170,85,255,.28);border-radius:16px;pointer-events:none;z-index:0
}
.hl-table::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.06) 0%,transparent 45%),
    repeating-linear-gradient(180deg,transparent 0,transparent 3px,rgba(255,255,255,.012) 3px,rgba(255,255,255,.012) 4px);
  border-radius:20px
}
.hl-label{
  color:rgba(200,150,255,.9);font-size:.68rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px;
  text-shadow:0 0 8px rgba(170,85,255,.3);display:flex;
  justify-content:space-between;align-items:center;position:relative;z-index:2
}
.hl-score{
  background:rgba(0,0,0,.55);color:var(--gold);padding:3px 10px;
  border-radius:10px;font-family:var(--mono);font-size:.78rem;
  border:1px solid rgba(232,168,32,.3)
}

/* Card arena — last card (left, dimmed) and current card (right, glowing) */
.hl-arena{
  display:flex;justify-content:center;align-items:center;
  gap:20px;perspective:1100px;min-height:170px;
  position:relative;z-index:2
}
.hl-slot{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  transform-style:preserve-3d
}
.hl-slot-label{
  font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gray);font-weight:700
}
.hl-slot.current .hl-slot-label{color:var(--gold);text-shadow:0 0 6px var(--goldg)}
.hl-slot.last{opacity:.55}
.hl-arrow{
  font-size:1.4rem;color:rgba(170,85,255,.55);margin-top:24px;
  animation:breathe 1.8s ease-in-out infinite
}

.hl-card{
  width:92px;height:132px;border-radius:11px;position:relative;
  transform-style:preserve-3d;flex-shrink:0;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.7))
}
.hl-card.dealt{animation:hlDealIn .6s cubic-bezier(.2,.9,.3,1.2) both}
.hl-card.dealt-hidden{animation:hlDealFaceDown .55s cubic-bezier(.2,.9,.3,1.2) both}
.hl-card.flipping{animation:hlFlipReveal .6s cubic-bezier(.4,.1,.2,1) both}
.hl-card.sliding-away{animation:hlSlideLast .45s cubic-bezier(.4,.1,.3,1) forwards}
.hl-card.result-win{animation:hlResultFlashWin .7s ease 1}
.hl-card.result-lose{animation:hlResultFlashLose .7s ease 1}
.hl-card-face,.hl-card-back{
  position:absolute;inset:0;border-radius:11px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:9px 11px
}
.hl-card-face{
  background:linear-gradient(160deg,#fafafa,#e4e4ec);
  border:1px solid #c0c0d0;
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 4px rgba(0,0,0,.1)
}
.hl-card-back{
  background:
    linear-gradient(135deg,#5820a0 0%,#3a1070 50%,#5820a0 100%);
  border:1px solid #200040;transform:rotateY(180deg);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.1),inset 0 0 0 4px #200040
}
.hl-card-back::after{
  content:"⭐";position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;color:rgba(255,255,255,.18);
  font-size:46px;text-shadow:0 0 10px #000
}
.hl-rank{font-family:var(--mono);font-weight:900;font-size:1.4rem;line-height:1}
.hl-rank.r{color:#d01020}.hl-rank.b{color:#0a0a18}
.hl-suit-tl{font-size:1rem;line-height:1}
.hl-suit-big{align-self:center;font-size:2.4rem;margin:-4px 0}
.hl-corner{display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.hl-corner.br{transform:rotate(180deg);align-self:flex-end}

.hl-result-badge{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:2.6rem;font-weight:900;z-index:5;
  animation:hlBadgePop .5s cubic-bezier(.2,1.4,.4,1) both;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.8));pointer-events:none
}

/* Odds hint bar — live probability read based on current card value */
.hl-odds{
  background:rgba(0,0,0,.45);border:1px solid var(--border);
  border-radius:12px;padding:10px 14px;margin-top:12px;
  position:relative;z-index:2
}
.hl-odds-header{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray);margin-bottom:6px;font-weight:700
}
.hl-odds-bar{
  display:flex;height:10px;border-radius:5px;overflow:hidden;
  background:var(--surf);border:1px solid var(--border)
}
.hl-odds-higher{
  background:linear-gradient(90deg,var(--green),#00b858);
  animation:hlOddsBarFill .5s ease both
}
.hl-odds-lower{
  background:linear-gradient(90deg,#b01020,var(--red));
  animation:hlOddsBarFill .5s ease both
}
.hl-odds-tie{background:var(--dim)}
.hl-odds-nums{
  display:flex;justify-content:space-between;
  margin-top:5px;font-family:var(--mono);font-size:.72rem;font-weight:700
}
.hl-odds-num-h{color:var(--green)}
.hl-odds-num-l{color:var(--red)}
.hl-odds-hint{
  text-align:center;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-top:6px;font-weight:700;
  text-shadow:0 0 6px var(--goldg)
}

/* Progress rail — 8 dots, tighter than Doors */
.hl-rail{
  display:flex;justify-content:space-between;align-items:center;gap:6px;
  background:linear-gradient(135deg,var(--card),var(--surf));
  border:1px solid var(--border);border-radius:14px;
  padding:10px 12px;margin-bottom:12px
}
.hl-rail-dots{display:flex;gap:4px;align-items:center;flex:1;justify-content:center}
.hl-rail-dot{
  width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.5rem;font-weight:800;font-family:var(--mono);
  border:1.5px solid var(--dim);background:var(--surf);color:var(--dim);
  transition:all .3s
}
.hl-rail-dot.done{
  background:linear-gradient(135deg,var(--gold),var(--goldd));
  border-color:var(--gold);color:#000;
  box-shadow:0 0 6px var(--goldg)
}
.hl-rail-dot.current{
  background:linear-gradient(135deg,var(--green),#00a050);
  border-color:var(--green);color:#000;
  animation:breathe 1.2s ease-in-out infinite;
  transform:scale(1.2)
}
.hl-rail-mult{
  color:var(--gold);font-family:var(--mono);font-weight:900;font-size:1.1rem;
  text-shadow:0 0 10px var(--goldg);min-width:48px
}
.hl-rail-meta{color:var(--gray);font-size:.65rem;letter-spacing:.08em;text-transform:uppercase}

/* Cash-out vs push stakes (shared visual language with Doors) */
.hl-stakes{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 10px
}
.hl-stake{
  border-radius:12px;padding:10px 12px;text-align:center;
  border:1px solid var(--border);background:var(--card)
}
.hl-stake.now{
  border-color:rgba(0,232,112,.35);
  background:linear-gradient(135deg,rgba(0,232,112,.08),var(--card))
}
.hl-stake.next{
  border-color:rgba(255,176,32,.3);
  background:linear-gradient(135deg,rgba(255,176,32,.06),var(--card))
}
.hl-stake-label{
  font-size:.6rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray);margin-bottom:4px
}
.hl-stake.now .hl-stake-label{color:var(--green)}
.hl-stake.next .hl-stake-label{color:var(--gold)}
.hl-stake-val{
  font-family:var(--mono);font-weight:800;font-size:1.05rem;color:var(--white)
}
.hl-stake.now .hl-stake-val{color:var(--green)}
.hl-stake.next .hl-stake-val{color:var(--gold)}
.hl-stake-sub{font-size:.6rem;color:var(--dim);font-family:var(--mono);margin-top:2px}

.hl-cashout{animation:hlGreedGlow 1.8s ease-in-out infinite}
.hl-cashout.tempting{animation:hlGreedGlow 1s ease-in-out infinite,hlDangerShake .4s ease-in-out infinite}

.hl-session{
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(0,0,0,.35);border:1px solid var(--border);
  border-radius:10px;padding:6px 12px;margin-bottom:10px;
  font-size:.65rem;letter-spacing:.08em;color:var(--gray);text-transform:uppercase
}
.hl-session b{color:var(--gold);font-family:var(--mono);font-size:.85rem;margin-left:4px}

/* ═══ ARCADE TOWER — night skyline, 3D climbing floors, reveal-on-loss ═══ */
@keyframes twFloorIn{
  0%{transform:translateY(-48px) rotateX(22deg);opacity:0}
  100%{transform:translateY(0) rotateX(0);opacity:1}
}
@keyframes twFloorCreak{
  0%,100%{transform:translate(0,0) rotateX(0)}
  25%{transform:translate(-2px,1px) rotateX(-1deg)}
  50%{transform:translate(2px,-1px) rotateX(1deg)}
  75%{transform:translate(-1px,2px) rotateX(-.5deg)}
}
@keyframes twFloorSafe{
  0%{box-shadow:0 4px 0 #1a3022,0 8px 16px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1)}
  50%{box-shadow:0 4px 0 #1a3022,0 8px 16px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.15),0 0 32px rgba(0,232,112,.6),0 0 0 2px rgba(0,232,112,.5) inset}
  100%{box-shadow:0 4px 0 #1a3022,0 8px 16px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1),0 0 12px rgba(0,232,112,.25),0 0 0 1px rgba(0,232,112,.35) inset}
}
@keyframes twFloorCollapse{
  0%{transform:translate(0,0) rotateX(0);opacity:1}
  30%{transform:translate(0,4px) rotateX(-2deg);opacity:1;background:linear-gradient(180deg,#4a0810,#2a0406)}
  100%{transform:translate(0,280px) rotateX(-75deg) rotateZ(8deg);opacity:0}
}
@keyframes twFloorRevealSafe{
  0%{box-shadow:0 4px 0 #1a3022,0 8px 16px rgba(0,0,0,.6)}
  50%{box-shadow:0 4px 0 #1a3022,0 8px 16px rgba(0,0,0,.6),0 0 0 3px var(--green),0 0 24px rgba(0,232,112,.6)}
  100%{box-shadow:0 4px 0 #1a3022,0 8px 16px rgba(0,0,0,.6),0 0 0 2px var(--green),0 0 16px rgba(0,232,112,.4)}
}
@keyframes twClimb{
  0%{transform:translateY(0)}
  100%{transform:translateY(88px)}
}
@keyframes twHeroJump{
  0%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-56px) scale(1.05)}
  100%{transform:translateX(-50%) translateY(-88px)}
}
@keyframes twHeroFall{
  0%{transform:translateX(-50%) translateY(0) rotate(0deg);opacity:1}
  100%{transform:translateX(-50%) translateY(320px) rotate(280deg);opacity:0}
}
@keyframes twSkylineTwinkle{
  0%,100%{opacity:.45}
  50%{opacity:.85}
}
@keyframes twRainStreak{
  0%{transform:translateY(-20px);opacity:0}
  20%{opacity:.25}
  100%{transform:translateY(280px);opacity:0}
}
@keyframes twLightningStrike{
  0%,92%,100%{opacity:0}
  94%,98%{opacity:1}
  96%{opacity:0}
}
@keyframes twGreedGlow{
  0%,100%{box-shadow:0 4px 16px var(--greeng),0 0 0 rgba(255,176,32,0)}
  50%{box-shadow:0 4px 22px rgba(0,232,112,.4),0 0 28px rgba(255,176,32,.35)}
}
@keyframes twDangerShake{0%,100%{transform:translate(0,0)}25%{transform:translate(-1px,0)}75%{transform:translate(1px,0)}}

.tw-stage{
  background:
    linear-gradient(180deg,#020208 0%,#080c18 30%,#0a1424 55%,#0a1a2e 80%,#061020 100%);
  border:1px solid #1a2540;border-radius:20px;padding:16px 14px 20px;
  box-shadow:inset 0 0 50px rgba(0,0,0,.8),0 10px 30px rgba(0,0,0,.7);
  margin-bottom:14px;position:relative;overflow:hidden;height:340px
}
.tw-stage::before{
  content:"";position:absolute;inset:8px;
  border:1px dashed rgba(0,212,255,.22);border-radius:16px;
  pointer-events:none;z-index:3
}
/* Silhouette skyline behind the tower */
.tw-skyline{
  position:absolute;left:0;right:0;bottom:0;height:110px;z-index:1;
  background:
    linear-gradient(180deg,transparent 0%,#020408 90%,#000 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 110' preserveAspectRatio='none'><path fill='%23050a14' d='M0 110V62l14-2 3-18 8 2v-16l10-3v22l14 3v14l10-6 3 4 8-2V40l6 4 3-10 8-2v24l10-4v26l14-3V52l6-6 4 8 10 2v-14l14-4v22l8 4v-18l10-2v10l8 6v10l14-4v-16l6-4 8 6v-22l10 4v28l14-2v-12l6-4 10 2v14l14 2v-18l8-4 3 6 10-2v28l12-2V50l8-4 3 8 10 2v10l14-4v28l10-2v-14l8 4v-16l14 4v34L0 110z'/></svg>") center bottom / cover no-repeat
}
/* Distant windows twinkle */
.tw-skyline::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(2px 2px at 40px 78px,#ffc060,transparent),
    radial-gradient(2px 2px at 90px 92px,#ffc060,transparent),
    radial-gradient(2px 2px at 160px 68px,#80c0ff,transparent),
    radial-gradient(2px 2px at 220px 85px,#ffc060,transparent),
    radial-gradient(2px 2px at 290px 72px,#ffc060,transparent),
    radial-gradient(2px 2px at 340px 88px,#80c0ff,transparent),
    radial-gradient(2px 2px at 380px 76px,#ffc060,transparent);
  animation:twSkylineTwinkle 3s ease-in-out infinite
}
/* Neon horizon glow behind skyline */
.tw-stage::after{
  content:"";position:absolute;left:0;right:0;bottom:100px;height:40px;z-index:1;
  background:radial-gradient(ellipse at center,rgba(0,212,255,.2) 0%,transparent 70%);
  pointer-events:none
}
.tw-rain{
  position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;
  background-image:
    linear-gradient(180deg,transparent 0 2px,rgba(120,180,255,.12) 2px 18px,transparent 18px);
  background-size:14px 32px;
  animation:twRainStreak 1s linear infinite
}
.tw-lightning{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at 70% 10%,rgba(180,220,255,.9),transparent 40%);
  opacity:0;animation:twLightningStrike 11s ease-in-out infinite
}
.tw-label{
  position:relative;z-index:4;
  color:rgba(0,212,255,.9);font-size:.68rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px;
  text-shadow:0 0 8px var(--cyang);display:flex;
  justify-content:space-between;align-items:center
}
.tw-score{
  background:rgba(0,0,0,.6);color:var(--gold);padding:3px 10px;
  border-radius:10px;font-family:var(--mono);font-size:.78rem;
  border:1px solid rgba(232,168,32,.3)
}

/* The climbing tower column */
.tw-tower{
  position:absolute;left:50%;top:40px;bottom:105px;
  transform:translateX(-50%);
  width:220px;z-index:3;perspective:800px
}
.tw-tower-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.4,.1,.3,1)
}
.tw-floor{
  position:absolute;left:0;right:0;height:68px;
  display:flex;gap:14px;
  animation:twFloorIn .5s cubic-bezier(.2,.9,.3,1.2) both
}
.tw-floor.faded{opacity:.35;filter:saturate(.5) blur(.5px)}
.tw-floor.ghost{opacity:.15;filter:saturate(.3) blur(1px)}
.tw-tile{
  flex:1;position:relative;border-radius:6px;
  background:linear-gradient(180deg,#3a3040 0%,#252030 55%,#1a1626 100%);
  border:1.5px solid #4a3a5a;
  box-shadow:
    0 4px 0 #1a1420,
    0 8px 16px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -3px 6px rgba(0,0,0,.4);
  cursor:pointer;transition:transform .15s;
  transform-style:preserve-3d;transform-origin:center top
}
.tw-tile::before{
  /* subtle stone texture */
  content:"";position:absolute;inset:4px;border-radius:4px;
  background:
    repeating-linear-gradient(45deg,transparent 0,transparent 4px,rgba(255,255,255,.02) 4px,rgba(255,255,255,.02) 5px),
    repeating-linear-gradient(-45deg,transparent 0,transparent 4px,rgba(0,0,0,.04) 4px,rgba(0,0,0,.04) 5px);
  pointer-events:none
}
.tw-tile-label{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:1.3rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.8))
}
.tw-tile.active:active{transform:scale(.94);filter:brightness(1.15)}
.tw-tile.locked{cursor:default}
.tw-tile.creaking{animation:twFloorCreak .28s ease-in-out}
.tw-tile.safe{
  background:linear-gradient(180deg,#1a4a30 0%,#0d3520 55%,#062515 100%);
  border-color:var(--green);
  animation:twFloorSafe .6s ease both
}
.tw-tile.safe .tw-tile-label{color:var(--green)}
.tw-tile.trap{
  background:linear-gradient(180deg,#4a0810 0%,#2a0406 55%,#180204 100%);
  border-color:var(--red);
  animation:twFloorCollapse .75s cubic-bezier(.4,.1,.5,1) forwards
}
.tw-tile.trap .tw-tile-label{color:var(--red)}
.tw-tile.reveal-safe{
  background:linear-gradient(180deg,#1a4a30 0%,#0d3520 55%,#062515 100%);
  border-color:var(--green);
  animation:twFloorRevealSafe .6s ease both
}
.tw-tile.reveal-safe .tw-tile-label{color:var(--green)}
.tw-tile.reveal-safe::after{
  content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:1.6rem;font-weight:900;color:var(--green);
  text-shadow:0 0 10px var(--greeng);animation:pop .3s ease both
}

/* The player figure */
.tw-hero{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:0;width:26px;height:32px;z-index:4;
  transition:bottom .55s cubic-bezier(.4,.1,.3,1)
}
.tw-hero::before{
  /* head */
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffd890,#b07830);
  box-shadow:0 0 8px rgba(255,200,100,.5)
}
.tw-hero::after{
  /* body */
  content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:16px;height:18px;border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg,var(--cyan),#0088bb);
  box-shadow:0 0 10px rgba(0,212,255,.4)
}
.tw-hero.jumping{animation:twHeroJump .55s cubic-bezier(.3,0,.4,1) both}
.tw-hero.falling{animation:twHeroFall .9s cubic-bezier(.3,.1,.6,1) forwards}

/* Progress rail — 8 floor dots */
.tw-rail{
  display:flex;justify-content:space-between;align-items:center;gap:6px;
  background:linear-gradient(135deg,var(--card),var(--surf));
  border:1px solid var(--border);border-radius:14px;
  padding:10px 12px;margin-bottom:12px
}
.tw-rail-dots{display:flex;gap:4px;align-items:center;flex:1;justify-content:center}
.tw-rail-dot{
  width:16px;height:16px;border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  font-size:.5rem;font-weight:800;font-family:var(--mono);
  border:1.5px solid var(--dim);background:var(--surf);color:var(--dim);
  transition:all .3s
}
.tw-rail-dot.done{
  background:linear-gradient(135deg,var(--gold),var(--goldd));
  border-color:var(--gold);color:#000;
  box-shadow:0 0 6px var(--goldg)
}
.tw-rail-dot.current{
  background:linear-gradient(135deg,var(--green),#00a050);
  border-color:var(--green);color:#000;
  animation:breathe 1.2s ease-in-out infinite;
  transform:scale(1.2)
}
.tw-rail-mult{
  color:var(--gold);font-family:var(--mono);font-weight:900;font-size:1.1rem;
  text-shadow:0 0 10px var(--goldg);min-width:48px
}
.tw-rail-meta{color:var(--gray);font-size:.65rem;letter-spacing:.08em;text-transform:uppercase}

/* Cash-out vs climb stakes */
.tw-stakes{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 10px
}
.tw-stake{
  border-radius:12px;padding:10px 12px;text-align:center;
  border:1px solid var(--border);background:var(--card)
}
.tw-stake.now{
  border-color:rgba(0,232,112,.35);
  background:linear-gradient(135deg,rgba(0,232,112,.08),var(--card))
}
.tw-stake.next{
  border-color:rgba(255,176,32,.3);
  background:linear-gradient(135deg,rgba(255,176,32,.06),var(--card))
}
.tw-stake-label{
  font-size:.6rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray);margin-bottom:4px
}
.tw-stake.now .tw-stake-label{color:var(--green)}
.tw-stake.next .tw-stake-label{color:var(--gold)}
.tw-stake-val{font-family:var(--mono);font-weight:800;font-size:1.05rem;color:var(--white)}
.tw-stake.now .tw-stake-val{color:var(--green)}
.tw-stake.next .tw-stake-val{color:var(--gold)}
.tw-stake-sub{font-size:.6rem;color:var(--dim);font-family:var(--mono);margin-top:2px}

.tw-cashout{animation:twGreedGlow 1.8s ease-in-out infinite}
.tw-cashout.tempting{animation:twGreedGlow 1s ease-in-out infinite,twDangerShake .4s ease-in-out infinite}
.tw-cashout.peak{
  background:linear-gradient(135deg,#ffd060,var(--gold));
  color:#000;font-weight:900;
  animation:twGreedGlow .6s ease-in-out infinite,twDangerShake .25s ease-in-out infinite
}

.tw-session{
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(0,0,0,.35);border:1px solid var(--border);
  border-radius:10px;padding:6px 12px;margin-bottom:10px;
  font-size:.65rem;letter-spacing:.08em;color:var(--gray);text-transform:uppercase
}
.tw-session b{color:var(--gold);font-family:var(--mono);font-size:.85rem;margin-left:4px}

/* ═══ ARCADE LOOT — pirate's vault, 3D wooden crates, lid hinge opening ═══ */
@keyframes ltCrateIn{
  0%{transform:translateY(-16px) scale(.8) rotateX(15deg);opacity:0}
  100%{transform:translateY(0) scale(1) rotateX(0);opacity:1}
}
@keyframes ltRumble{
  0%,100%{transform:translate(0,0) rotate(0)}
  20%{transform:translate(-3px,1px) rotate(-1.5deg)}
  40%{transform:translate(3px,-1px) rotate(1.5deg)}
  60%{transform:translate(-2px,2px) rotate(-1deg)}
  80%{transform:translate(2px,-2px) rotate(1deg)}
}
@keyframes ltLidOpenGold{
  0%{transform:rotateX(0)}
  100%{transform:rotateX(-108deg)}
}
@keyframes ltLidBlown{
  0%{transform:rotateX(0) translateY(0);opacity:1}
  30%{transform:rotateX(-30deg) translateY(-4px);opacity:1}
  100%{transform:rotateX(-180deg) translateY(-60px);opacity:0}
}
@keyframes ltCoinBurst{
  0%{transform:translate(-50%,0) scale(.2);opacity:0}
  30%{transform:translate(calc(-50% + var(--lt-dx,0)),calc(-40px + var(--lt-dy,0))) scale(1.1);opacity:1}
  100%{transform:translate(calc(-50% + var(--lt-dx,0) * 1.3),calc(-90px + var(--lt-dy,0) * 1.2)) scale(.85);opacity:0}
}
@keyframes ltSmokeBlast{
  0%{transform:translate(-50%,-50%) scale(.3);opacity:0}
  30%{transform:translate(-50%,-75%) scale(1.8);opacity:1}
  100%{transform:translate(-50%,-130%) scale(3);opacity:0}
}
@keyframes ltGoldGlow{
  0%,100%{box-shadow:inset 0 0 16px rgba(255,200,60,.35),0 0 0 rgba(255,200,60,0)}
  50%{box-shadow:inset 0 0 30px rgba(255,200,60,.65),0 0 20px rgba(255,200,60,.5)}
}
@keyframes ltTrapFlash{
  0%,100%{background:var(--bg)}
  20%{background:rgba(255,26,42,.18)}
  50%{background:rgba(180,12,20,.08)}
}
@keyframes ltChainSway{
  0%,100%{transform:rotate(-2deg)}
  50%{transform:rotate(2deg)}
}
@keyframes ltVaultEmber{
  0%,100%{opacity:.4;transform:translateY(0)}
  50%{opacity:.9;transform:translateY(-6px)}
}
@keyframes ltGreedGlow{
  0%,100%{box-shadow:0 4px 16px var(--greeng),0 0 0 rgba(255,176,32,0)}
  50%{box-shadow:0 4px 22px rgba(0,232,112,.4),0 0 28px rgba(255,176,32,.35)}
}
@keyframes ltDangerShake{0%,100%{transform:translate(0,0)}25%{transform:translate(-1px,0)}75%{transform:translate(1px,0)}}
@keyframes ltCountPop{0%{transform:scale(1)}50%{transform:scale(1.35);color:var(--gold)}100%{transform:scale(1)}}

.lt-vault{
  background:
    radial-gradient(ellipse at 50% 100%,rgba(255,160,40,.15) 0%,transparent 45%),
    radial-gradient(ellipse at center,#2e1a08 0%,#180d04 55%,#080402 100%);
  border:1px solid #4a2a10;border-radius:20px;padding:16px 14px 18px;
  box-shadow:inset 0 0 50px rgba(0,0,0,.85),0 10px 30px rgba(0,0,0,.7);
  margin-bottom:14px;position:relative;overflow:hidden
}
.lt-vault::before{
  content:"";position:absolute;inset:8px;
  border:1px dashed rgba(232,168,32,.28);border-radius:16px;
  pointer-events:none;z-index:3
}
/* Stone-wall texture overlay */
.lt-vault::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    repeating-linear-gradient(90deg,transparent 0,transparent 48px,rgba(0,0,0,.08) 48px,rgba(0,0,0,.08) 49px),
    repeating-linear-gradient(180deg,transparent 0,transparent 32px,rgba(0,0,0,.08) 32px,rgba(0,0,0,.08) 33px);
  opacity:.5
}
.lt-vault.trap-flash{animation:ltTrapFlash .8s ease}
/* Hanging chains in the corners */
.lt-chain{
  position:absolute;top:-4px;width:14px;height:46px;z-index:2;
  background:
    repeating-linear-gradient(180deg,#6a6a78 0 5px,#3a3a48 5px 8px,#6a6a78 8px 13px);
  border-radius:4px;opacity:.6;
  animation:ltChainSway 4s ease-in-out infinite;
  transform-origin:top center;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))
}
.lt-chain.left{left:14px}
.lt-chain.right{right:14px;animation-delay:-2s}
/* Warm ember glow at the bottom */
.lt-embers{
  position:absolute;left:0;right:0;bottom:0;height:40px;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse at 25% 100%,rgba(255,120,30,.35) 0%,transparent 60%),
    radial-gradient(ellipse at 75% 100%,rgba(255,180,60,.3) 0%,transparent 60%);
  animation:ltVaultEmber 3s ease-in-out infinite
}

.lt-label{
  color:rgba(232,168,32,.9);font-size:.68rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:10px;
  text-shadow:0 0 8px var(--goldg);display:flex;
  justify-content:space-between;align-items:center;
  position:relative;z-index:4
}
.lt-score{
  background:rgba(0,0,0,.55);color:var(--gold);padding:3px 10px;
  border-radius:10px;font-family:var(--mono);font-size:.78rem;
  border:1px solid rgba(232,168,32,.3)
}

/* Live odds strip */
.lt-odds{
  display:flex;justify-content:space-around;align-items:center;
  background:rgba(0,0,0,.45);border:1px solid var(--border);
  border-radius:10px;padding:8px 10px;margin-bottom:12px;
  position:relative;z-index:4;font-size:.72rem;font-family:var(--mono);font-weight:700
}
.lt-odds-item{display:flex;flex-direction:column;align-items:center;gap:2px}
.lt-odds-item-label{font-size:.55rem;letter-spacing:.12em;color:var(--gray);text-transform:uppercase;font-weight:700}
.lt-odds-item-val{font-size:.95rem}
.lt-odds-item.gold .lt-odds-item-val{color:var(--green);text-shadow:0 0 6px rgba(0,232,112,.4)}
.lt-odds-item.trap .lt-odds-item-val{color:var(--red);text-shadow:0 0 6px rgba(255,26,42,.4)}
.lt-odds-item.chance .lt-odds-item-val{color:var(--gold);text-shadow:0 0 6px var(--goldg);animation:ltCountPop .4s ease}
.lt-odds-sep{width:1px;height:22px;background:var(--border)}

/* The 10-crate grid */
.lt-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;
  position:relative;z-index:4;perspective:600px
}
.lt-crate{
  position:relative;aspect-ratio:1/1;
  background:none;border:none;padding:0;cursor:pointer;
  transform-style:preserve-3d;
  animation:ltCrateIn .4s cubic-bezier(.2,.9,.3,1.2) both
}
.lt-crate.locked{cursor:default}
.lt-crate.active:active{transform:scale(.93)}
.lt-crate.rumbling{animation:ltRumble .45s ease-in-out}

/* Crate body — wooden box with planks and iron bands */
.lt-body{
  position:absolute;inset:0;border-radius:5px;
  background:
    linear-gradient(180deg,#8a5a28 0%,#5a3814 50%,#3a2208 100%);
  border:1.5px solid #2a1804;
  box-shadow:
    inset 0 0 0 1px rgba(255,200,120,.08),
    inset 0 2px 4px rgba(255,200,120,.12),
    inset 0 -3px 6px rgba(0,0,0,.5),
    0 3px 6px rgba(0,0,0,.7)
}
.lt-body::before{
  /* horizontal plank lines */
  content:"";position:absolute;inset:3px 6px;
  background:
    linear-gradient(180deg,transparent 30%,rgba(0,0,0,.35) 30%,rgba(0,0,0,.35) 32%,transparent 32%,transparent 62%,rgba(0,0,0,.35) 62%,rgba(0,0,0,.35) 64%,transparent 64%);
  pointer-events:none
}
.lt-body::after{
  /* iron bands on the sides */
  content:"";position:absolute;left:2px;right:2px;top:45%;height:4px;
  background:linear-gradient(180deg,#6a6070,#3a3040 40%,#1a1420);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(0,0,0,.5)
}
/* Crate lid — hinges from the top */
.lt-lid{
  position:absolute;left:0;right:0;top:0;height:42%;
  border-radius:5px 5px 0 0;
  background:
    linear-gradient(180deg,#a06a30 0%,#6a4018 70%,#4a2808 100%);
  border:1.5px solid #2a1804;
  box-shadow:
    inset 0 2px 3px rgba(255,200,120,.18),
    inset 0 -2px 4px rgba(0,0,0,.4);
  transform-origin:top center;
  transition:transform .1s;backface-visibility:hidden;z-index:2
}
.lt-lid::before{
  /* padlock on the lid */
  content:"";position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);
  width:12px;height:9px;border-radius:2px;
  background:linear-gradient(180deg,#ffd880,#b08830 60%,#604018);
  border:1px solid #302010;
  box-shadow:0 1px 2px rgba(0,0,0,.6)
}
.lt-lid::after{
  /* padlock shackle */
  content:"";position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
  width:7px;height:6px;border:1.5px solid #c89030;border-bottom:none;
  border-radius:4px 4px 0 0
}
.lt-crate.just-opened.opened-gold .lt-lid{animation:ltLidOpenGold .5s cubic-bezier(.4,.1,.3,1) forwards}
.lt-crate.just-opened.opened-trap .lt-lid{animation:ltLidBlown .55s cubic-bezier(.3,.1,.4,1) forwards}
/* Static final state for already-opened crates (post-render) */
.lt-crate.opened-gold:not(.just-opened) .lt-lid{transform:rotateX(-108deg)}
.lt-crate.opened-trap:not(.just-opened) .lt-lid{opacity:0;transform:rotateX(-180deg) translateY(-60px)}

/* Crate interior — visible after lid opens */
.lt-inside{
  position:absolute;inset:6px 4px 4px;border-radius:3px;
  background:radial-gradient(ellipse at center,#1a0a00 0%,#000 80%);
  display:flex;align-items:center;justify-content:center;
  opacity:0;z-index:1
}
.lt-crate.opened-gold .lt-inside,
.lt-crate.opened-trap .lt-inside{opacity:1}
.lt-crate.just-opened .lt-inside{transition:opacity .3s ease .25s}
.lt-crate.opened-gold .lt-inside{
  background:radial-gradient(ellipse at center,#fff0b0 0%,#ffc040 45%,#6a4008 100%);
  animation:ltGoldGlow 1.4s ease-in-out infinite
}
.lt-crate.opened-trap .lt-inside{
  background:radial-gradient(ellipse at center,#ff3030 0%,#6a0808 60%,#200000 100%)
}
.lt-inside-icon{
  font-size:1.4rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.8))
}
.lt-crate.just-opened .lt-inside-icon{animation:pop .35s cubic-bezier(.3,1.4,.4,1) .3s both}

/* Crate number label on the front */
.lt-crate-num{
  position:absolute;bottom:2px;left:0;right:0;text-align:center;
  font-family:var(--mono);font-weight:900;font-size:.7rem;
  color:rgba(255,220,160,.6);z-index:3;pointer-events:none
}
.lt-crate.opened-gold .lt-crate-num,
.lt-crate.opened-trap .lt-crate-num{opacity:0}

/* Coin burst particles on gold open */
.lt-coin{
  position:absolute;top:50%;left:50%;
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff8c0,#ffc040 45%,#806010);
  box-shadow:0 0 8px rgba(255,200,60,.7),inset 0 0 4px rgba(255,255,200,.5);
  pointer-events:none;z-index:10;
  animation:ltCoinBurst .85s cubic-bezier(.3,.5,.4,1) forwards
}
.lt-smoke{
  position:absolute;top:50%;left:50%;
  width:60px;height:60px;border-radius:50%;
  background:radial-gradient(circle,rgba(60,20,10,.85) 0%,rgba(30,10,5,.4) 55%,transparent 80%);
  pointer-events:none;z-index:10;
  animation:ltSmokeBlast .9s ease-out forwards
}

/* Mult strip above grid */
.lt-mult-strip{
  display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(135deg,var(--card),var(--surf));
  border:1px solid var(--border);border-radius:14px;
  padding:10px 14px;margin-bottom:12px
}
.lt-mult-now{
  color:var(--gold);font-family:var(--mono);font-weight:900;font-size:1.2rem;
  text-shadow:0 0 10px var(--goldg)
}
.lt-mult-next{color:var(--gray);font-size:.7rem;font-family:var(--mono);font-weight:700;text-align:right}
.lt-mult-next b{color:var(--green);font-size:.9rem}

/* Cash-out panels — shared visual language */
.lt-stakes{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 10px
}
.lt-stake{
  border-radius:12px;padding:10px 12px;text-align:center;
  border:1px solid var(--border);background:var(--card)
}
.lt-stake.now{
  border-color:rgba(0,232,112,.35);
  background:linear-gradient(135deg,rgba(0,232,112,.08),var(--card))
}
.lt-stake.next{
  border-color:rgba(255,176,32,.3);
  background:linear-gradient(135deg,rgba(255,176,32,.06),var(--card))
}
.lt-stake-label{
  font-size:.6rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray);margin-bottom:4px
}
.lt-stake.now .lt-stake-label{color:var(--green)}
.lt-stake.next .lt-stake-label{color:var(--gold)}
.lt-stake-val{font-family:var(--mono);font-weight:800;font-size:1.05rem;color:var(--white)}
.lt-stake.now .lt-stake-val{color:var(--green)}
.lt-stake.next .lt-stake-val{color:var(--gold)}
.lt-stake-sub{font-size:.6rem;color:var(--dim);font-family:var(--mono);margin-top:2px}

.lt-cashout{animation:ltGreedGlow 1.8s ease-in-out infinite}
.lt-cashout.tempting{animation:ltGreedGlow 1s ease-in-out infinite,ltDangerShake .4s ease-in-out infinite}
.lt-cashout.peak{
  background:linear-gradient(135deg,#ffd060,var(--gold));
  color:#000;font-weight:900;
  animation:ltGreedGlow .6s ease-in-out infinite,ltDangerShake .25s ease-in-out infinite
}

.lt-session{
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(0,0,0,.35);border:1px solid var(--border);
  border-radius:10px;padding:6px 12px;margin-bottom:10px;
  font-size:.65rem;letter-spacing:.08em;color:var(--gray);text-transform:uppercase
}
.lt-session b{color:var(--gold);font-family:var(--mono);font-size:.85rem;margin-left:4px}

/* ═══ ARCADE POTION — alchemist's lab, 3D flasks with liquid, clue scrolls ═══ */
@keyframes pnFlaskIn{
  0%{transform:translateY(20px) scale(.85);opacity:0}
  100%{transform:translateY(0) scale(1);opacity:1}
}
@keyframes pnLiquidBubble{
  0%,100%{transform:translateY(0) scaleX(1)}
  30%{transform:translateY(-2px) scaleX(1.05)}
  60%{transform:translateY(1px) scaleX(.97)}
}
@keyframes pnLiquidSwirl{
  0%{background-position:0 0,0 0}
  100%{background-position:60px 20px,-40px 15px}
}
@keyframes pnBubbleRise{
  0%{transform:translate(var(--pn-bx,0),0);opacity:0}
  20%{opacity:.8}
  100%{transform:translate(calc(var(--pn-bx,0) + 4px),-44px);opacity:0}
}
@keyframes pnFlaskPour{
  0%{transform:rotate(0)}
  30%{transform:rotate(-45deg)}
  100%{transform:rotate(0)}
}
@keyframes pnFlaskCrack{
  0%{transform:translate(0,0) rotate(0);opacity:1}
  20%{transform:translate(-3px,2px) rotate(-3deg);opacity:1}
  100%{transform:translate(2px,30px) rotate(8deg);opacity:0;filter:saturate(.3) brightness(.5)}
}
@keyframes pnRevealVal{
  0%{transform:scale(.3) rotate(-10deg);opacity:0}
  60%{transform:scale(1.2) rotate(3deg);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}
@keyframes pnFormulaIn{
  0%{transform:translateY(12px);opacity:0}
  100%{transform:translateY(0);opacity:1}
}
@keyframes pnScrollIn{
  0%{transform:translateY(-8px) scaleY(0);opacity:0;transform-origin:top}
  100%{transform:translateY(0) scaleY(1);opacity:1;transform-origin:top}
}
@keyframes pnSparkFloat{
  0%{transform:translate(var(--pn-sx,0),0) scale(.3);opacity:0}
  15%{opacity:.9}
  100%{transform:translate(calc(var(--pn-sx,0) + 10px),-120px) scale(1.2);opacity:0}
}
@keyframes pnTargetGlow{
  0%,100%{text-shadow:0 0 10px rgba(0,212,255,.5),0 0 20px rgba(0,212,255,.3)}
  50%{text-shadow:0 0 18px rgba(0,212,255,.8),0 0 36px rgba(0,212,255,.5)}
}
@keyframes pnCauldronGlow{
  0%,100%{opacity:.35}
  50%{opacity:.7}
}
@keyframes pnMixBurst{
  0%{transform:translate(-50%,-50%) scale(.3);opacity:0}
  40%{transform:translate(-50%,-50%) scale(1.3);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1.8);opacity:0}
}
@keyframes pnGreedGlow{
  0%,100%{box-shadow:0 4px 16px var(--greeng),0 0 0 rgba(0,212,255,0)}
  50%{box-shadow:0 4px 22px rgba(0,232,112,.4),0 0 28px rgba(0,212,255,.35)}
}
@keyframes pnDangerShake{0%,100%{transform:translate(0,0)}25%{transform:translate(-1px,0)}75%{transform:translate(1px,0)}}

.pn-lab{
  background:
    radial-gradient(ellipse at 50% 100%,rgba(100,255,200,.1) 0%,transparent 50%),
    radial-gradient(ellipse at center,#0a2830 0%,#051418 55%,#020608 100%);
  border:1px solid #0e4a5a;border-radius:20px;padding:18px 14px;
  box-shadow:inset 0 0 50px rgba(0,0,0,.85),0 10px 30px rgba(0,0,0,.7);
  margin-bottom:14px;position:relative;overflow:hidden;min-height:280px
}
.pn-lab::before{
  content:"";position:absolute;inset:8px;
  border:1px dashed rgba(100,255,200,.22);border-radius:16px;
  pointer-events:none;z-index:3
}
/* Floating magical sparks background */
.pn-lab::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1.5px 1.5px at 50px 40px,rgba(100,255,200,.8),transparent),
    radial-gradient(1.5px 1.5px at 140px 80px,rgba(180,120,255,.7),transparent),
    radial-gradient(1.5px 1.5px at 220px 30px,rgba(100,255,200,.6),transparent),
    radial-gradient(2px 2px at 320px 90px,rgba(255,180,100,.5),transparent),
    radial-gradient(1.5px 1.5px at 80px 160px,rgba(180,120,255,.6),transparent),
    radial-gradient(1.5px 1.5px at 280px 200px,rgba(100,255,200,.7),transparent);
  opacity:.6;animation:breathe 3s ease-in-out infinite
}
/* Cauldron glow at bottom */
.pn-cauldron-glow{
  position:absolute;left:0;right:0;bottom:0;height:50px;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(100,255,200,.3) 0%,transparent 70%);
  animation:pnCauldronGlow 2.5s ease-in-out infinite
}

.pn-label{
  color:rgba(100,255,200,.9);font-size:.68rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:10px;
  text-shadow:0 0 8px rgba(100,255,200,.4);display:flex;
  justify-content:space-between;align-items:center;position:relative;z-index:4
}
.pn-score{
  background:rgba(0,0,0,.55);color:var(--cyan);padding:3px 10px;
  border-radius:10px;font-family:var(--mono);font-size:.78rem;
  border:1px solid rgba(0,212,255,.3)
}

/* Target display — big mystical number */
.pn-target{
  text-align:center;margin:8px 0 14px;position:relative;z-index:4
}
.pn-target-label{
  display:block;font-size:.58rem;letter-spacing:.24em;
  color:rgba(100,255,200,.7);font-weight:700;text-transform:uppercase
}
.pn-target-val{
  display:inline-block;margin-top:2px;font-family:var(--display);
  font-size:2.4rem;font-weight:900;color:var(--cyan);
  animation:pnTargetGlow 2s ease-in-out infinite;
  padding:0 16px;letter-spacing:.05em
}

/* Three flasks row */
.pn-flasks{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  position:relative;z-index:4;margin-bottom:14px
}
.pn-flask-slot{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  animation:pnFlaskIn .5s cubic-bezier(.2,.9,.3,1.2) both
}
.pn-flask-slot[data-idx="0"]{animation-delay:0ms}
.pn-flask-slot[data-idx="1"]{animation-delay:80ms}
.pn-flask-slot[data-idx="2"]{animation-delay:160ms}

.pn-flask{
  position:relative;width:54px;height:82px;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))
}
/* Flask shape via clip-path — classic round-bottom, narrow neck */
.pn-flask-body{
  position:absolute;inset:0;
  clip-path:polygon(38% 0,62% 0,62% 26%,92% 58%,100% 82%,94% 96%,78% 100%,22% 100%,6% 96%,0 82%,8% 58%,38% 26%);
  background:linear-gradient(180deg,rgba(200,240,255,.08) 0%,rgba(120,180,220,.18) 60%,rgba(60,100,140,.35) 100%);
  border:1px solid rgba(180,230,255,.12)
}
/* Shine stripe on the left side */
.pn-flask-body::before{
  content:"";position:absolute;left:14%;top:30%;width:4px;height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0));
  border-radius:2px
}
/* Liquid inside — clipped so it fills only the lower portion */
.pn-liquid{
  position:absolute;left:0;right:0;bottom:0;
  clip-path:polygon(38% 0,62% 0,62% 26%,92% 58%,100% 82%,94% 96%,78% 100%,22% 100%,6% 96%,0 82%,8% 58%,38% 26%);
  height:70%;
  background:
    radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.35) 0%,transparent 40%),
    linear-gradient(180deg,var(--pn-liq-top,#5ad4ff) 0%,var(--pn-liq-bot,#1a80c8) 100%),
    repeating-linear-gradient(45deg,transparent 0,transparent 8px,rgba(255,255,255,.04) 8px,rgba(255,255,255,.04) 9px);
  animation:pnLiquidBubble 1.8s ease-in-out infinite,
            pnLiquidSwirl 5s linear infinite;
  background-size:auto,auto,40px 40px
}
.pn-flask[data-color="a"]{--pn-liq-top:#5ad4ff;--pn-liq-bot:#1a60c8}
.pn-flask[data-color="b"]{--pn-liq-top:#c080ff;--pn-liq-bot:#6020c0}
.pn-flask[data-color="c"]{--pn-liq-top:#80ffb0;--pn-liq-bot:#20a060}

/* Tiny rising bubbles inside liquid */
.pn-bubble{
  position:absolute;bottom:5%;left:50%;
  width:4px;height:4px;border-radius:50%;
  background:rgba(255,255,255,.6);
  box-shadow:0 0 3px rgba(255,255,255,.4);
  animation:pnBubbleRise 1.8s ease-in infinite
}

.pn-flask-letter{
  font-family:var(--display);font-weight:900;font-size:.9rem;
  color:var(--cyan);letter-spacing:.1em;text-shadow:0 0 6px rgba(0,212,255,.4)
}
.pn-flask-val{
  font-family:var(--mono);font-weight:900;font-size:1.1rem;
  color:var(--gold);background:rgba(0,0,0,.6);
  padding:2px 10px;border-radius:10px;border:1px solid rgba(255,176,32,.4);
  text-shadow:0 0 6px var(--goldg);min-height:22px;display:flex;align-items:center;
  min-width:36px;justify-content:center
}
.pn-flask-val.revealed{animation:pnRevealVal .45s cubic-bezier(.3,1.5,.4,1) both}
.pn-flask-val.hidden{color:rgba(255,176,32,.4)}

/* Reveal phase: flasks shake on pick, then values pop */
.pn-flask-slot.pouring .pn-flask{animation:pnFlaskPour .6s ease-in-out}
.pn-flask-slot.breaking .pn-flask{animation:pnFlaskCrack .9s cubic-bezier(.3,.1,.4,1) forwards}

/* Clue scrolls */
.pn-clues{
  display:flex;flex-direction:column;gap:6px;
  margin-bottom:12px;position:relative;z-index:4
}
.pn-clue{
  background:linear-gradient(180deg,#c8b890 0%,#a89870 100%);
  border:1px solid #605028;border-radius:4px;padding:8px 12px;
  font-size:.82rem;font-weight:700;color:#2a2010;
  text-align:center;letter-spacing:.02em;
  box-shadow:
    inset 0 1px 2px rgba(255,240,200,.5),
    inset 0 -1px 2px rgba(0,0,0,.2),
    0 2px 6px rgba(0,0,0,.5);
  animation:pnScrollIn .4s cubic-bezier(.3,1.2,.4,1) both;
  position:relative
}
.pn-clue::before,.pn-clue::after{
  /* Decorative seals on the ends */
  content:"";position:absolute;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#c01030,#800818);
  box-shadow:0 0 4px rgba(0,0,0,.5)
}
.pn-clue::before{left:4px}
.pn-clue::after{right:4px}
.pn-clue:nth-child(1){animation-delay:50ms}
.pn-clue:nth-child(2){animation-delay:150ms}
.pn-clue:nth-child(3){animation-delay:250ms}

/* Formula display after reveal */
.pn-formula{
  background:rgba(0,0,0,.6);border:1px solid rgba(0,212,255,.4);
  border-radius:10px;padding:10px 14px;margin-bottom:12px;
  text-align:center;font-family:var(--mono);font-weight:800;font-size:1rem;
  color:var(--gold);letter-spacing:.08em;
  text-shadow:0 0 6px var(--goldg);position:relative;z-index:4;
  animation:pnFormulaIn .4s cubic-bezier(.3,1.2,.4,1) both
}
.pn-formula .pn-formula-result{color:var(--cyan);margin-left:8px}
.pn-formula.correct{border-color:var(--green);color:var(--green)}
.pn-formula.wrong{border-color:var(--red);color:var(--red)}

/* "Mix" burst when correct — big glowing circle over the flasks */
.pn-mix-burst{
  position:absolute;top:50%;left:50%;width:80px;height:80px;
  border-radius:50%;z-index:5;pointer-events:none;
  background:radial-gradient(circle,rgba(100,255,200,.9) 0%,rgba(180,120,255,.5) 40%,transparent 70%);
  animation:pnMixBurst .9s ease-out forwards
}

/* Progress rail — 4 round pills with multipliers */
.pn-rail{
  display:flex;justify-content:space-between;align-items:center;gap:6px;
  background:linear-gradient(135deg,var(--card),var(--surf));
  border:1px solid var(--border);border-radius:14px;
  padding:10px 12px;margin-bottom:12px
}
.pn-rail-pills{display:flex;gap:5px;align-items:center;flex:1;justify-content:center}
.pn-rail-pill{
  padding:3px 8px;border-radius:6px;
  font-size:.62rem;font-weight:800;font-family:var(--mono);
  border:1.5px solid var(--dim);background:var(--surf);color:var(--dim);
  transition:all .3s;letter-spacing:.03em
}
.pn-rail-pill.done{
  background:linear-gradient(135deg,var(--gold),var(--goldd));
  border-color:var(--gold);color:#000;
  box-shadow:0 0 6px var(--goldg)
}
.pn-rail-pill.current{
  background:linear-gradient(135deg,var(--green),#00a050);
  border-color:var(--green);color:#000;
  animation:breathe 1.2s ease-in-out infinite;
  transform:scale(1.12)
}
.pn-rail-mult{
  color:var(--gold);font-family:var(--mono);font-weight:900;font-size:1.1rem;
  text-shadow:0 0 10px var(--goldg);min-width:48px
}
.pn-rail-meta{color:var(--gray);font-size:.65rem;letter-spacing:.08em;text-transform:uppercase}

/* Stakes panels */
.pn-stakes{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 10px
}
.pn-stake{
  border-radius:12px;padding:10px 12px;text-align:center;
  border:1px solid var(--border);background:var(--card)
}
.pn-stake.now{
  border-color:rgba(0,232,112,.35);
  background:linear-gradient(135deg,rgba(0,232,112,.08),var(--card))
}
.pn-stake.next{
  border-color:rgba(0,212,255,.3);
  background:linear-gradient(135deg,rgba(0,212,255,.06),var(--card))
}
.pn-stake-label{
  font-size:.6rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray);margin-bottom:4px
}
.pn-stake.now .pn-stake-label{color:var(--green)}
.pn-stake.next .pn-stake-label{color:var(--cyan)}
.pn-stake-val{font-family:var(--mono);font-weight:800;font-size:1.05rem;color:var(--white)}
.pn-stake.now .pn-stake-val{color:var(--green)}
.pn-stake.next .pn-stake-val{color:var(--cyan)}
.pn-stake-sub{font-size:.6rem;color:var(--dim);font-family:var(--mono);margin-top:2px}

.pn-cashout{animation:pnGreedGlow 1.8s ease-in-out infinite}
.pn-cashout.tempting{animation:pnGreedGlow 1s ease-in-out infinite,pnDangerShake .4s ease-in-out infinite}
.pn-cashout.peak{
  background:linear-gradient(135deg,#80ffe0,var(--cyan));
  color:#000;font-weight:900;
  animation:pnGreedGlow .6s ease-in-out infinite,pnDangerShake .25s ease-in-out infinite
}

/* How-to-play info box */
.pn-howto{
  background:linear-gradient(135deg,rgba(100,255,200,.06),var(--card));
  border:1px solid rgba(100,255,200,.25);
  border-left:3px solid var(--cyan);
  border-radius:12px;padding:12px 14px;margin-bottom:12px;
  position:relative;z-index:4
}
.pn-howto-title{
  color:var(--cyan);font-size:.7rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:6px;text-shadow:0 0 6px rgba(0,212,255,.3)
}
.pn-howto-body{color:var(--white);font-size:.78rem;line-height:1.55;margin:0}
.pn-howto-body b{color:var(--gold)}
.pn-howto-steps{
  list-style:none;padding:0;margin:6px 0 0;
  display:flex;flex-direction:column;gap:3px
}
.pn-howto-steps li{
  color:var(--gray);font-size:.75rem;line-height:1.4;
  padding-left:18px;position:relative
}
.pn-howto-steps li::before{
  content:attr(data-n);position:absolute;left:0;top:0;
  width:14px;height:14px;border-radius:50%;
  background:rgba(0,212,255,.2);color:var(--cyan);
  font-size:.6rem;font-weight:900;font-family:var(--mono);
  display:flex;align-items:center;justify-content:center
}
.pn-howto-toggle{
  background:none;border:none;color:var(--cyan);
  font-size:.7rem;font-weight:700;letter-spacing:.1em;
  cursor:pointer;padding:4px 0 0;text-transform:uppercase
}
.pn-howto.collapsed .pn-howto-body,
.pn-howto.collapsed .pn-howto-steps{display:none}

.pn-session{
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(0,0,0,.35);border:1px solid var(--border);
  border-radius:10px;padding:6px 12px;margin-bottom:10px;
  font-size:.65rem;letter-spacing:.08em;color:var(--gray);text-transform:uppercase
}
.pn-session b{color:var(--gold);font-family:var(--mono);font-size:.85rem;margin-left:4px}

/* ═══ ARCADE STOCK — neon CRT trading terminal, live price chart, crash drama ═══ */
@keyframes stScanlines{
  0%{background-position:0 0}
  100%{background-position:0 4px}
}
@keyframes stCursorBlink{
  0%,48%{opacity:1}
  50%,100%{opacity:0}
}
@keyframes stTickerGlow{
  0%,100%{text-shadow:0 0 12px rgba(0,232,112,.5),0 0 22px rgba(0,232,112,.3)}
  50%{text-shadow:0 0 20px rgba(0,232,112,.8),0 0 40px rgba(0,232,112,.55)}
}
@keyframes stTickerGlowGold{
  0%,100%{text-shadow:0 0 12px rgba(255,176,32,.5),0 0 22px rgba(255,176,32,.3)}
  50%{text-shadow:0 0 20px rgba(255,176,32,.85),0 0 40px rgba(255,176,32,.6)}
}
@keyframes stTickerGlowRed{
  0%,100%{text-shadow:0 0 12px rgba(255,26,42,.6),0 0 22px rgba(255,26,42,.4)}
  50%{text-shadow:0 0 22px rgba(255,26,42,.95),0 0 44px rgba(255,26,42,.7)}
}
@keyframes stPulseGreen{
  0%,100%{box-shadow:0 0 0 rgba(0,232,112,0),0 4px 16px var(--greeng)}
  50%{box-shadow:0 0 24px rgba(0,232,112,.5),0 4px 20px var(--greeng)}
}
@keyframes stPulseRed{
  0%,100%{box-shadow:0 0 0 rgba(255,26,42,0)}
  50%{box-shadow:0 0 26px rgba(255,26,42,.55)}
}
@keyframes stPulseOrange{
  0%,100%{box-shadow:0 0 0 rgba(255,140,0,0)}
  50%{box-shadow:0 0 20px rgba(255,140,0,.55)}
}
@keyframes stChartLineGrow{
  from{stroke-dashoffset:1000}
  to{stroke-dashoffset:0}
}
@keyframes stCandleDrop{
  0%{transform:translateY(0);opacity:1}
  50%{opacity:.8}
  100%{transform:translateY(200px) rotate(8deg);opacity:0}
}
@keyframes stSoldStamp{
  0%{transform:translate(-50%,-50%) scale(.3) rotate(-18deg);opacity:0}
  60%{transform:translate(-50%,-50%) scale(1.1) rotate(-12deg);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1) rotate(-12deg);opacity:1}
}
@keyframes stCrashStamp{
  0%{transform:translate(-50%,-50%) scale(.3);opacity:0}
  60%{transform:translate(-50%,-50%) scale(1.2);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1.05);opacity:1}
}
@keyframes stSellShake{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(-1px,0)}
  75%{transform:translate(1px,0)}
}
@keyframes stDangerFlash{
  0%,100%{background-color:transparent}
  50%{background-color:rgba(255,26,42,.08)}
}
@keyframes stBarTickDown{
  0%{transform:translateY(-6px);opacity:0}
  100%{transform:translateY(0);opacity:1}
}

.st-terminal{
  background:
    radial-gradient(ellipse at 50% 0%,rgba(0,212,255,.06) 0%,transparent 60%),
    linear-gradient(180deg,#030a0f 0%,#020608 60%,#010305 100%);
  border:1px solid #0a4058;border-radius:20px;padding:16px 14px;
  box-shadow:
    inset 0 0 50px rgba(0,0,0,.85),
    inset 0 0 0 1px rgba(0,212,255,.05),
    0 10px 30px rgba(0,0,0,.7);
  margin-bottom:14px;position:relative;overflow:hidden
}
.st-terminal::before{
  content:"";position:absolute;inset:8px;
  border:1px dashed rgba(0,232,112,.2);border-radius:16px;
  pointer-events:none;z-index:3
}
/* CRT scanlines */
.st-terminal::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(0deg,
    transparent 0,transparent 2px,
    rgba(0,212,255,.04) 2px,rgba(0,212,255,.04) 3px,
    transparent 3px,transparent 4px);
  animation:stScanlines 1.2s linear infinite
}
.st-terminal.danger{animation:stDangerFlash .8s ease-in-out infinite}

/* Terminal header — ticker name + live indicator */
.st-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:10px;position:relative;z-index:4
}
.st-ticker-name{
  color:var(--cyan);font-family:var(--mono);font-weight:900;font-size:.9rem;
  letter-spacing:.16em;text-shadow:0 0 8px rgba(0,212,255,.5)
}
.st-live-pill{
  display:flex;align-items:center;gap:5px;
  background:rgba(0,232,112,.12);border:1px solid var(--green);
  padding:3px 9px;border-radius:10px;
  font-size:.62rem;font-weight:800;letter-spacing:.14em;
  color:var(--green);text-transform:uppercase;font-family:var(--mono)
}
.st-live-dot{
  width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 6px var(--green);animation:breathe 1.2s ease-in-out infinite
}
.st-live-pill.crashed{background:rgba(255,26,42,.15);border-color:var(--red);color:var(--red)}
.st-live-pill.crashed .st-live-dot{background:var(--red);box-shadow:0 0 6px var(--red);animation:none}
.st-live-pill.sold{background:rgba(255,176,32,.15);border-color:var(--gold);color:var(--gold)}
.st-live-pill.sold .st-live-dot{background:var(--gold);box-shadow:0 0 6px var(--gold);animation:none}

/* Giant live price readout */
.st-ticker-readout{
  text-align:center;margin:6px 0 12px;position:relative;z-index:4
}
.st-ticker-mult{
  font-family:var(--display);font-weight:900;font-size:3.2rem;line-height:1;
  color:var(--green);letter-spacing:-.02em;
  animation:stTickerGlow 2s ease-in-out infinite;
  font-variant-numeric:tabular-nums;
  transition:color .3s
}
.st-ticker-mult.warn{color:var(--gold);animation:stTickerGlowGold 1.2s ease-in-out infinite}
.st-ticker-mult.danger{color:var(--red);animation:stTickerGlowRed .6s ease-in-out infinite}
.st-ticker-mult::after{
  content:"x";font-size:1.4rem;margin-left:4px;opacity:.7;font-weight:700
}
.st-ticker-sub{
  display:flex;justify-content:center;align-items:center;gap:16px;
  font-family:var(--mono);font-size:.82rem;font-weight:700;margin-top:4px
}
.st-ticker-delta{color:var(--green);text-shadow:0 0 6px rgba(0,232,112,.4)}
.st-ticker-delta.danger{color:var(--red);text-shadow:0 0 6px rgba(255,26,42,.4)}
.st-ticker-time{color:var(--gray)}
.st-cursor{
  display:inline-block;width:2px;height:.9em;background:currentColor;
  margin-left:2px;vertical-align:middle;
  animation:stCursorBlink 1s step-end infinite
}

/* Chart area */
.st-chart-wrap{
  position:relative;height:140px;margin-bottom:10px;
  border:1px solid rgba(0,232,112,.2);border-radius:10px;
  background:
    linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.6));
  overflow:hidden;z-index:4
}
.st-chart-grid{
  position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent 0,transparent 27px,rgba(0,232,112,.12) 27px,rgba(0,232,112,.12) 28px),
    repeating-linear-gradient(90deg,transparent 0,transparent 39px,rgba(0,232,112,.08) 39px,rgba(0,232,112,.08) 40px)
}
.st-chart svg{position:absolute;inset:0;width:100%;height:100%}
.st-chart-line{
  fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 4px currentColor)
}
.st-chart-fill{opacity:.18}
.st-chart-line.green{stroke:var(--green);color:var(--green)}
.st-chart-fill.green{fill:var(--green)}
.st-chart-line.warn{stroke:var(--gold);color:var(--gold)}
.st-chart-fill.warn{fill:var(--gold)}
.st-chart-line.danger{stroke:var(--red);color:var(--red)}
.st-chart-fill.danger{fill:var(--red)}
.st-chart-marker{
  position:absolute;width:10px;height:10px;border-radius:50%;
  background:var(--green);border:2px solid #000;
  transform:translate(-50%,-50%);
  box-shadow:0 0 12px var(--green);transition:all .08s linear;pointer-events:none
}
.st-chart-marker.warn{background:var(--gold);box-shadow:0 0 12px var(--gold)}
.st-chart-marker.danger{background:var(--red);box-shadow:0 0 12px var(--red)}
/* Hatched "crashed" overlay that drops down */
.st-chart-crashed{
  position:absolute;inset:0;
  background:
    linear-gradient(135deg,transparent 40%,rgba(255,26,42,.2) 40%,rgba(255,26,42,.2) 50%,transparent 50%,transparent 90%,rgba(255,26,42,.2) 90%),
    rgba(60,10,15,.35);
  background-size:16px 16px;
  display:none;animation:fadeIn .3s ease
}
.st-chart-wrap.crashed .st-chart-crashed{display:block}
/* Sold/crashed stamp overlays */
.st-stamp{
  position:absolute;top:50%;left:50%;z-index:10;
  font-family:var(--display);font-weight:900;font-size:1.8rem;
  letter-spacing:.12em;padding:6px 18px;border-radius:4px;
  border:3px solid currentColor;pointer-events:none
}
.st-stamp.sold{color:var(--gold);animation:stSoldStamp .5s cubic-bezier(.3,1.5,.4,1) both;background:rgba(255,176,32,.1)}
.st-stamp.crashed{color:var(--red);animation:stCrashStamp .4s cubic-bezier(.2,1.3,.4,1) both;background:rgba(255,26,42,.15)}

/* Stats strip: growth rate + risk */
.st-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;
  position:relative;z-index:4
}
.st-stat{
  background:rgba(0,0,0,.5);border:1px solid var(--border);
  border-radius:10px;padding:8px 10px;text-align:center
}
.st-stat-label{
  font-size:.55rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray);margin-bottom:2px
}
.st-stat-val{
  font-family:var(--mono);font-weight:800;font-size:.9rem;color:var(--white)
}
.st-stat.growth .st-stat-val{color:var(--cyan)}
.st-stat.risk.low{border-color:rgba(0,212,255,.35)}
.st-stat.risk.low .st-stat-val{color:var(--cyan)}
.st-stat.risk.med{border-color:rgba(255,176,32,.35);animation:stPulseOrange 1.6s ease-in-out infinite}
.st-stat.risk.med .st-stat-val{color:var(--gold)}
.st-stat.risk.high{border-color:rgba(255,100,30,.45);animation:stPulseOrange .9s ease-in-out infinite}
.st-stat.risk.high .st-stat-val{color:#ff8c30}
.st-stat.risk.extreme{border-color:var(--red);animation:stPulseRed .5s ease-in-out infinite,stSellShake .3s ease-in-out infinite}
.st-stat.risk.extreme .st-stat-val{color:var(--red)}

/* SELL button — dominant, gets louder as price climbs */
.st-sell-btn{
  background:linear-gradient(135deg,var(--green),#00b858);color:#000;
  animation:stPulseGreen 2s ease-in-out infinite;
  font-weight:900;font-size:1.1rem;letter-spacing:.06em
}
.st-sell-btn.warn{
  background:linear-gradient(135deg,#ffd060,var(--gold));color:#000;
  animation:stPulseGreen 1.3s ease-in-out infinite
}
.st-sell-btn.danger{
  background:linear-gradient(135deg,#ff8030,var(--red));color:#fff;
  animation:stPulseRed .7s ease-in-out infinite,stSellShake .4s ease-in-out infinite
}
.st-sell-btn.extreme{
  background:linear-gradient(135deg,#ff3030,#a00818);color:#fff;
  animation:stPulseRed .4s ease-in-out infinite,stSellShake .25s ease-in-out infinite
}

.st-how-btn{
  background:transparent;color:var(--cyan);border:1px solid rgba(0,212,255,.3);
  border-radius:10px;padding:6px 10px;font-size:.65rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer
}

/* How-to info box for stock */
.st-howto{
  background:linear-gradient(135deg,rgba(0,212,255,.06),var(--card));
  border:1px solid rgba(0,212,255,.25);border-left:3px solid var(--cyan);
  border-radius:12px;padding:12px 14px;margin-bottom:12px
}
.st-howto-title{
  color:var(--cyan);font-size:.7rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:6px
}
.st-howto-body{color:var(--white);font-size:.78rem;line-height:1.55;margin:0}
.st-howto-body b{color:var(--gold)}
.st-howto-steps{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:3px}
.st-howto-steps li{color:var(--gray);font-size:.75rem;line-height:1.4;padding-left:18px;position:relative}
.st-howto-steps li::before{
  content:attr(data-n);position:absolute;left:0;top:0;
  width:14px;height:14px;border-radius:50%;
  background:rgba(0,212,255,.2);color:var(--cyan);
  font-size:.6rem;font-weight:900;font-family:var(--mono);
  display:flex;align-items:center;justify-content:center
}
.st-howto-toggle{
  background:none;border:none;color:var(--cyan);
  font-size:.7rem;font-weight:700;letter-spacing:.1em;
  cursor:pointer;padding:4px 0 0;text-transform:uppercase
}
.st-howto.collapsed .st-howto-body,
.st-howto.collapsed .st-howto-steps{display:none}

.st-session{
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(0,0,0,.35);border:1px solid var(--border);
  border-radius:10px;padding:6px 12px;margin-bottom:10px;
  font-size:.65rem;letter-spacing:.08em;color:var(--gray);text-transform:uppercase
}
.st-session b{color:var(--gold);font-family:var(--mono);font-size:.85rem;margin-left:4px}

/* ═══ ARCADE BOMB — wired detonator panel, 3D wires, reveal-on-loss ═══ */
@keyframes bmWireIn{
  0%{transform:translateX(-24px);opacity:0}
  100%{transform:translateX(0);opacity:1}
}
@keyframes bmWireShake{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(-2px,1px)}
  50%{transform:translate(2px,-1px)}
  75%{transform:translate(-1px,1px)}
}
@keyframes bmCurrentPulse{
  0%{left:-8%;opacity:0}
  10%,90%{opacity:1}
  100%{left:104%;opacity:0}
}
@keyframes bmCutSpark{
  0%{transform:translate(-50%,-50%) scale(.3);opacity:0}
  30%{transform:translate(-50%,-50%) scale(1.6);opacity:1}
  100%{transform:translate(-50%,-50%) scale(2.5);opacity:0}
}
@keyframes bmWireSnipLeft{
  0%{transform:translateX(0) rotate(0);opacity:1}
  100%{transform:translateX(-6px) rotate(-3deg);opacity:.4}
}
@keyframes bmWireSnipRight{
  0%{transform:translateX(0) rotate(0);opacity:1}
  100%{transform:translateX(6px) rotate(3deg);opacity:.4}
}
@keyframes bmExplode{
  0%{transform:translate(-50%,-50%) scale(.3);opacity:0;background:var(--gold)}
  20%{transform:translate(-50%,-50%) scale(2);opacity:1;background:#ff8030}
  60%{transform:translate(-50%,-50%) scale(3.5);opacity:.8;background:var(--red)}
  100%{transform:translate(-50%,-50%) scale(5);opacity:0;background:transparent}
}
@keyframes bmSmoke{
  0%{transform:translate(-50%,-50%) scale(.3);opacity:0}
  30%{transform:translate(-50%,-50%) scale(1.4);opacity:1}
  100%{transform:translate(-50%,-50%) scale(2.4);opacity:0}
}
@keyframes bmCasingShake{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-6px,3px) rotate(-1deg)}
  20%{transform:translate(5px,-3px) rotate(1deg)}
  30%{transform:translate(-4px,4px) rotate(-1deg)}
  40%{transform:translate(3px,-4px) rotate(1deg)}
  50%{transform:translate(-5px,2px) rotate(-.5deg)}
  60%{transform:translate(4px,-2px) rotate(.5deg)}
  70%{transform:translate(-2px,3px)}
  80%{transform:translate(2px,-1px)}
}
@keyframes bmLedPulse{
  0%,100%{opacity:.5;box-shadow:0 0 4px var(--red),inset 0 0 2px rgba(255,255,255,.3)}
  50%{opacity:1;box-shadow:0 0 12px var(--red),0 0 20px rgba(255,26,42,.6),inset 0 0 2px rgba(255,255,255,.5)}
}
@keyframes bmLedPulseGreen{
  0%,100%{opacity:.5;box-shadow:0 0 4px var(--green),inset 0 0 2px rgba(255,255,255,.3)}
  50%{opacity:1;box-shadow:0 0 12px var(--green),0 0 20px rgba(0,232,112,.6),inset 0 0 2px rgba(255,255,255,.5)}
}
@keyframes bmTimerFlicker{
  0%,92%,100%{opacity:1}
  94%{opacity:.6}
  96%{opacity:1}
  98%{opacity:.8}
}
@keyframes bmScissorsSwoop{
  0%{transform:translate(30px,-8px) rotate(15deg);opacity:0}
  40%{transform:translate(-8px,0) rotate(-8deg);opacity:1}
  80%{transform:translate(-8px,0) rotate(-8deg);opacity:1}
  100%{transform:translate(-8px,0) rotate(-8deg);opacity:0}
}
@keyframes bmRevealBomb{
  0%{background-color:rgba(18,18,28,.4);border-color:#2a1406}
  50%{background-color:rgba(255,26,42,.3);border-color:var(--red);box-shadow:0 0 20px var(--redg)}
  100%{background-color:rgba(100,8,14,.5);border-color:var(--red);box-shadow:0 0 12px var(--redg)}
}
@keyframes bmGreedGlow{
  0%,100%{box-shadow:0 4px 16px var(--greeng),0 0 0 rgba(255,176,32,0)}
  50%{box-shadow:0 4px 22px rgba(0,232,112,.4),0 0 28px rgba(255,176,32,.35)}
}
@keyframes bmDangerShake{0%,100%{transform:translate(0,0)}25%{transform:translate(-1px,0)}75%{transform:translate(1px,0)}}

.bm-panel{
  background:
    radial-gradient(ellipse at 50% 0%,rgba(255,26,42,.1) 0%,transparent 50%),
    linear-gradient(180deg,#1a0608 0%,#0a0204 60%,#040102 100%);
  border:1px solid #4a0810;border-radius:20px;padding:16px 14px 18px;
  box-shadow:
    inset 0 0 50px rgba(0,0,0,.85),
    inset 0 0 0 1px rgba(255,26,42,.08),
    0 10px 30px rgba(0,0,0,.7);
  margin-bottom:14px;position:relative;overflow:hidden
}
.bm-panel::before{
  content:"";position:absolute;inset:8px;
  border:1px dashed rgba(255,26,42,.28);border-radius:16px;
  pointer-events:none;z-index:3
}
/* Caution-stripe accent along the top edge */
.bm-panel::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2;
  background:repeating-linear-gradient(45deg,
    #ffd020 0,#ffd020 8px,
    #1a0608 8px,#1a0608 16px);
  opacity:.55
}
.bm-panel.exploding{animation:bmCasingShake .7s ease-in-out}

/* Detonator header: timer + warning LED + round counter */
.bm-casing{
  background:linear-gradient(180deg,#2a1010 0%,#180608 100%);
  border:1px solid #4a1418;border-radius:10px;
  padding:8px 12px;margin-bottom:12px;
  display:flex;justify-content:space-between;align-items:center;
  position:relative;z-index:4;
  box-shadow:inset 0 1px 2px rgba(255,100,100,.15),inset 0 -1px 2px rgba(0,0,0,.6)
}
.bm-timer{
  font-family:var(--mono);font-weight:900;font-size:1.3rem;
  color:#ff3030;letter-spacing:.06em;
  text-shadow:0 0 8px rgba(255,48,48,.6),0 0 16px rgba(255,48,48,.3);
  animation:bmTimerFlicker 5s ease-in-out infinite;
  background:rgba(0,0,0,.6);padding:3px 10px;border-radius:4px;
  border:1px solid rgba(255,48,48,.3);min-width:74px;text-align:center
}
.bm-led-wrap{display:flex;align-items:center;gap:8px}
.bm-led{
  width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#ff6060,#b00818 60%,#600408);
  animation:bmLedPulse 1.4s ease-in-out infinite
}
.bm-led.calm{background:radial-gradient(circle at 30% 30%,#60ff90,#00a050 60%,#006028);animation:bmLedPulseGreen 2s ease-in-out infinite}
.bm-led.urgent{animation:bmLedPulse .5s ease-in-out infinite}
.bm-round-counter{
  font-family:var(--mono);font-weight:800;font-size:.72rem;
  color:var(--gold);letter-spacing:.1em;
  background:rgba(0,0,0,.55);padding:3px 8px;border-radius:6px;
  border:1px solid rgba(232,168,32,.3)
}
.bm-label{
  color:rgba(255,100,110,.85);font-size:.64rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  position:relative;z-index:4
}

/* Wire list */
.bm-wires{
  display:flex;flex-direction:column;gap:7px;
  position:relative;z-index:4;margin-top:10px
}
.bm-wire{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:12px 12px;border-radius:10px;
  background:linear-gradient(180deg,rgba(20,20,30,.85) 0%,rgba(10,10,18,.95) 100%);
  border:1px solid rgba(100,100,140,.2);
  cursor:pointer;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 2px 4px rgba(0,0,0,.4);
  animation:bmWireIn .4s cubic-bezier(.3,.9,.3,1.2) both;
  transition:transform .15s
}
.bm-wire[data-idx="0"]{animation-delay:0ms}
.bm-wire[data-idx="1"]{animation-delay:60ms}
.bm-wire[data-idx="2"]{animation-delay:120ms}
.bm-wire[data-idx="3"]{animation-delay:180ms}
.bm-wire[data-idx="4"]{animation-delay:240ms}
.bm-wire[data-idx="5"]{animation-delay:300ms}
.bm-wire.active:active{transform:scale(.98)}
.bm-wire.locked{cursor:default}
.bm-wire.shaking{animation:bmWireShake .25s ease-in-out}

/* Plug connectors at each end of the wire */
.bm-plug{
  position:relative;width:12px;height:20px;border-radius:2px;
  background:linear-gradient(180deg,#909098,#404048 60%,#20202a);
  border:1px solid #000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.6);
  flex-shrink:0
}
.bm-plug::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:4px;height:6px;border-radius:50%;background:var(--wire-color,#ff4040);
  box-shadow:0 0 4px var(--wire-color,#ff4040)
}
/* The wire line itself — 3D bevel with top highlight and bottom shadow */
.bm-wire-line{
  flex:1;position:relative;height:10px;border-radius:5px;
  background:var(--wire-color,#ff4040);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.45),
    inset 0 -2px 2px rgba(0,0,0,.5),
    0 0 10px var(--wire-glow,rgba(255,64,64,.4));
  overflow:hidden
}
/* Extra bevel overlay (on top of the color) for more 3D pop */
.bm-wire-line::before{
  content:"";position:absolute;inset:0;border-radius:5px;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,.35) 0%,
    transparent 35%,
    transparent 65%,
    rgba(0,0,0,.45) 100%)
}
/* Moving "current" dot along the wire */
.bm-wire-line::after{
  content:"";position:absolute;top:50%;left:-8%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0%,var(--wire-color) 50%,transparent 80%);
  box-shadow:0 0 10px rgba(255,255,255,.6);
  animation:bmCurrentPulse 2.4s linear infinite;
  animation-delay:var(--wire-delay,0s)
}

/* Scissors tap affordance */
.bm-scissors{
  font-size:1.1rem;flex-shrink:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))
}
.bm-wire-num{
  position:absolute;top:2px;left:8px;
  font-family:var(--mono);font-weight:800;font-size:.55rem;
  color:rgba(255,255,255,.35);letter-spacing:.1em;pointer-events:none
}

/* Scissors animation when cutting a wire */
.bm-cut-scissors{
  position:absolute;top:50%;right:24px;transform:translateY(-50%);
  font-size:1.4rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.8));
  z-index:5;pointer-events:none;
  animation:bmScissorsSwoop .5s cubic-bezier(.3,.8,.4,1) forwards
}

/* Spark burst when wire is cut */
.bm-spark{
  position:absolute;top:50%;left:50%;
  width:30px;height:30px;border-radius:50%;z-index:6;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,200,.95) 0%,rgba(255,200,60,.6) 40%,transparent 70%);
  animation:bmCutSpark .5s ease-out forwards
}

/* Explosion burst for bomb-wire hit */
.bm-explode{
  position:absolute;top:50%;left:50%;
  width:60px;height:60px;border-radius:50%;z-index:7;pointer-events:none;
  animation:bmExplode .7s ease-out forwards
}
.bm-smoke{
  position:absolute;top:50%;left:50%;
  width:80px;height:80px;border-radius:50%;z-index:6;pointer-events:none;
  background:radial-gradient(circle,rgba(40,20,10,.85) 0%,rgba(20,10,5,.5) 50%,transparent 80%);
  animation:bmSmoke .9s ease-out forwards
}

/* Post-cut states */
.bm-wire.cut-safe{
  opacity:.55;background:linear-gradient(180deg,rgba(10,22,14,.7) 0%,rgba(5,12,8,.85) 100%);
  border-color:rgba(0,232,112,.25);cursor:default
}
.bm-wire.cut-safe .bm-wire-line{filter:saturate(.4) brightness(.65)}
.bm-wire.cut-safe .bm-wire-line::after{animation:none;opacity:0}
.bm-wire.cut-safe .bm-scissors{opacity:.3}
.bm-wire.cut-bomb{
  background:linear-gradient(180deg,rgba(80,10,16,.7) 0%,rgba(40,4,8,.85) 100%);
  border-color:var(--red);animation:bmRevealBomb .6s ease forwards;cursor:default
}
.bm-wire.cut-bomb .bm-scissors{opacity:0}
.bm-wire.reveal-bomb{
  animation:bmRevealBomb .6s ease forwards;cursor:default
}
.bm-wire.reveal-bomb::after{
  content:"💣 BOMB";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--display);font-weight:900;font-size:.85rem;color:var(--red);
  text-shadow:0 0 8px rgba(255,26,42,.8),0 0 16px rgba(255,26,42,.4);
  letter-spacing:.14em;pointer-events:none;z-index:4
}
.bm-wire.reveal-bomb .bm-wire-line,
.bm-wire.reveal-bomb .bm-scissors,
.bm-wire.reveal-bomb .bm-wire-num{opacity:.25}

/* Progression rail — 5 round dots */
.bm-rail{
  display:flex;justify-content:space-between;align-items:center;gap:6px;
  background:linear-gradient(135deg,var(--card),var(--surf));
  border:1px solid var(--border);border-radius:14px;
  padding:10px 12px;margin-bottom:12px
}
.bm-rail-dots{display:flex;gap:5px;align-items:center;flex:1;justify-content:center}
.bm-rail-dot{
  width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.52rem;font-weight:800;font-family:var(--mono);
  border:1.5px solid var(--dim);background:var(--surf);color:var(--dim);
  transition:all .3s
}
.bm-rail-dot.done{
  background:linear-gradient(135deg,var(--gold),var(--goldd));
  border-color:var(--gold);color:#000;
  box-shadow:0 0 6px var(--goldg)
}
.bm-rail-dot.current{
  background:linear-gradient(135deg,var(--red),var(--redd));
  border-color:var(--red);color:#fff;
  animation:bmLedPulse 1.2s ease-in-out infinite;
  transform:scale(1.2)
}
.bm-rail-mult{
  color:var(--gold);font-family:var(--mono);font-weight:900;font-size:1.1rem;
  text-shadow:0 0 10px var(--goldg);min-width:48px
}
.bm-rail-meta{color:var(--gray);font-size:.65rem;letter-spacing:.08em;text-transform:uppercase}

/* Stakes panels */
.bm-stakes{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 10px
}
.bm-stake{
  border-radius:12px;padding:10px 12px;text-align:center;
  border:1px solid var(--border);background:var(--card)
}
.bm-stake.now{
  border-color:rgba(0,232,112,.35);
  background:linear-gradient(135deg,rgba(0,232,112,.08),var(--card))
}
.bm-stake.next{
  border-color:rgba(255,176,32,.3);
  background:linear-gradient(135deg,rgba(255,176,32,.06),var(--card))
}
.bm-stake-label{
  font-size:.6rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray);margin-bottom:4px
}
.bm-stake.now .bm-stake-label{color:var(--green)}
.bm-stake.next .bm-stake-label{color:var(--gold)}
.bm-stake-val{font-family:var(--mono);font-weight:800;font-size:1.05rem;color:var(--white)}
.bm-stake.now .bm-stake-val{color:var(--green)}
.bm-stake.next .bm-stake-val{color:var(--gold)}
.bm-stake-sub{font-size:.6rem;color:var(--dim);font-family:var(--mono);margin-top:2px}

.bm-cashout{animation:bmGreedGlow 1.8s ease-in-out infinite}
.bm-cashout.tempting{animation:bmGreedGlow 1s ease-in-out infinite,bmDangerShake .4s ease-in-out infinite}
.bm-cashout.peak{
  background:linear-gradient(135deg,#ffd060,var(--gold));
  color:#000;font-weight:900;
  animation:bmGreedGlow .6s ease-in-out infinite,bmDangerShake .25s ease-in-out infinite
}

.bm-session{
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(0,0,0,.35);border:1px solid var(--border);
  border-radius:10px;padding:6px 12px;margin-bottom:10px;
  font-size:.65rem;letter-spacing:.08em;color:var(--gray);text-transform:uppercase
}
.bm-session b{color:var(--gold);font-family:var(--mono);font-size:.85rem;margin-left:4px}

/* One-shot toss animations: rise, spin, descend, land, and bounce on the correct
   face — all in a single keyframe so there's no class-swap handoff. Heads lands
   at rotateY(3240deg) (multiple of 360, heads up). Tails lands at 3060deg (heads
   rotated 180°, tails up). */
@keyframes cfTossHeads{
  0%{transform:translateY(0) rotateY(0) rotateX(0) scale(1)}
  25%{transform:translateY(-105px) rotateY(720deg) rotateX(10deg) scale(.88)}
  50%{transform:translateY(-135px) rotateY(1440deg) rotateX(6deg) scale(.82)}
  75%{transform:translateY(-80px) rotateY(2340deg) rotateX(-2deg) scale(.94)}
  90%{transform:translateY(-10px) rotateY(3060deg) rotateX(0) scale(1)}
  95%{transform:translateY(4px) rotateY(3240deg) scale(1.08,.92)}
  100%{transform:translateY(0) rotateY(3240deg) scale(1)}
}
@keyframes cfTossTails{
  0%{transform:translateY(0) rotateY(0) rotateX(0) scale(1)}
  25%{transform:translateY(-105px) rotateY(720deg) rotateX(10deg) scale(.88)}
  50%{transform:translateY(-135px) rotateY(1440deg) rotateX(6deg) scale(.82)}
  75%{transform:translateY(-80px) rotateY(2160deg) rotateX(-2deg) scale(.94)}
  90%{transform:translateY(-10px) rotateY(2880deg) rotateX(0) scale(1)}
  95%{transform:translateY(4px) rotateY(3060deg) scale(1.08,.92)}
  100%{transform:translateY(0) rotateY(3060deg) scale(1)}
}
@keyframes cfImpactRing{
  0%{transform:translate(-50%,-50%) scale(.3);opacity:0}
  20%{opacity:.8}
  100%{transform:translate(-50%,-50%) scale(2.8);opacity:0}
}
@keyframes cfShadowPulse{
  0%,100%{transform:translateX(-50%) scaleX(1);opacity:.5}
  30%{transform:translateX(-50%) scaleX(.45);opacity:.25}
  55%{transform:translateX(-50%) scaleX(.35);opacity:.2}
  80%{transform:translateX(-50%) scaleX(.7);opacity:.4}
}
@keyframes cfPreviewFloat{
  0%,100%{transform:translateY(0) rotateY(-12deg)}
  50%{transform:translateY(-4px) rotateY(-12deg)}
}
@keyframes cfPreviewFloatR{
  0%,100%{transform:translateY(0) rotateY(12deg)}
  50%{transform:translateY(-4px) rotateY(12deg)}
}
@keyframes cfHistoryIn{
  0%{transform:scale(.3) rotate(-20deg);opacity:0}
  60%{transform:scale(1.15) rotate(5deg);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}
@keyframes cfStreakFlash{
  0%{text-shadow:0 0 8px var(--goldg)}
  50%{text-shadow:0 0 20px var(--gold),0 0 40px var(--goldg)}
  100%{text-shadow:0 0 8px var(--goldg)}
}

/* The casino felt table (override the old .cf-stage) */
.cf-stage{
  background:radial-gradient(ellipse at center,#0d4028 0%,#072015 60%,#03120a 100%);
  border:1px solid #1a5030;border-radius:20px;padding:22px 16px 18px;
  box-shadow:inset 0 0 40px rgba(0,0,0,.7),0 10px 30px rgba(0,0,0,.6);
  margin-bottom:14px;position:relative;overflow:hidden
}
.cf-stage::before{
  content:"";position:absolute;inset:8px;
  border:1px dashed rgba(232,168,32,.22);border-radius:16px;
  pointer-events:none;z-index:1
}
.cf-stage::after{display:none}  /* kill the old after content */

.cf-table-label{
  color:rgba(232,168,32,.85);font-size:.68rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px;
  text-shadow:0 0 8px var(--goldg);display:flex;
  justify-content:space-between;align-items:center;position:relative;z-index:2
}
.cf-score{
  background:rgba(0,0,0,.5);color:var(--gold);padding:3px 10px;
  border-radius:10px;font-family:var(--mono);font-size:.78rem;
  border:1px solid rgba(232,168,32,.3)
}

/* The arena where the coin flies — gives room for the toss arc */
.cf-arena{
  position:relative;height:200px;display:flex;align-items:flex-end;
  justify-content:center;padding-bottom:16px;z-index:2
}
/* Subtle ground shadow under the coin that shrinks while it's in the air */
.cf-ground-shadow{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  width:100px;height:10px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.55) 0%,transparent 70%);
  filter:blur(2px);opacity:.5;pointer-events:none
}
.cf-coin-wrap.toss-heads + .cf-ground-shadow,
.cf-coin-wrap.toss-tails + .cf-ground-shadow{animation:cfShadowPulse 1.7s cubic-bezier(.3,0,.35,1) forwards}

/* The coin wrap — keep the existing .cf-coin-wrap but scope more clearly */
.cf-coin-wrap{
  perspective:800px;width:120px;height:120px;
  margin:0 auto;position:relative;z-index:3
}
.cf-coin-wrap.toss-heads .cf-coin{animation:cfTossHeads 1.7s cubic-bezier(.3,0,.35,1) forwards}
.cf-coin-wrap.toss-tails .cf-coin{animation:cfTossTails 1.7s cubic-bezier(.3,0,.35,1) forwards}

/* Impact ring that expands from landing point */
.cf-impact-ring{
  position:absolute;bottom:10px;left:50%;
  width:80px;height:80px;border-radius:50%;
  border:2px solid rgba(232,168,32,.6);
  transform:translate(-50%,-50%) scale(.3);
  pointer-events:none;opacity:0;z-index:2
}
.cf-impact-ring.fire{animation:cfImpactRing .6s ease-out forwards}
.cf-impact-ring.win{border-color:rgba(0,232,112,.8);box-shadow:0 0 20px rgba(0,232,112,.4)}
.cf-impact-ring.lose{border-color:rgba(255,26,42,.7);box-shadow:0 0 20px rgba(255,26,42,.35)}

/* Pick screen: two preview coins angled toward the camera, then H/T buttons below */
.cf-preview-row{
  display:flex;justify-content:center;align-items:center;
  gap:30px;perspective:600px;margin:8px 0 18px;position:relative;z-index:2
}
.cf-preview{
  width:90px;height:90px;border-radius:50%;position:relative;
  transform-style:preserve-3d;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.7));
  cursor:pointer;transition:transform .2s
}
.cf-preview.heads{animation:cfPreviewFloat 2.4s ease-in-out infinite}
.cf-preview.tails{animation:cfPreviewFloatR 2.4s ease-in-out infinite .4s}
.cf-preview:active{transform:scale(.94) rotateY(-12deg)}
.cf-preview.tails:active{transform:scale(.94) rotateY(12deg)}
.cf-preview-face{
  position:absolute;inset:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:3px
}
.cf-preview.heads .cf-preview-face{
  background:radial-gradient(circle at 35% 35%,#ffe066,#e8a000 50%,#b87800 100%);
  border:3px solid rgba(255,220,80,.5);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.4),inset 0 -2px 4px rgba(0,0,0,.3)
}
.cf-preview.tails .cf-preview-face{
  background:radial-gradient(circle at 35% 35%,#d8e8f0,#8899b0 50%,#556070 100%);
  border:3px solid rgba(200,220,240,.4);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.3),inset 0 -2px 4px rgba(0,0,0,.4)
}
.cf-preview-sym{font-size:34px;line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.cf-preview-lbl{
  font-size:.45rem;font-weight:900;letter-spacing:.2em;text-transform:uppercase
}
.cf-preview.heads .cf-preview-lbl{color:#7a5000}
.cf-preview.tails .cf-preview-lbl{color:#3a4f60}

.cf-status{
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(232,168,32,.85);text-align:center;min-height:18px;
  position:relative;z-index:2;margin-top:6px
}
.cf-status.win{color:var(--green)}
.cf-status.lose{color:var(--red)}

.cf-picked-strip{
  display:flex;justify-content:center;align-items:center;gap:8px;
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(232,168,32,.8);position:relative;z-index:2;margin-bottom:8px
}
.cf-picked-strip b{color:var(--white);font-family:var(--mono);font-size:.82rem}
.cf-picked-strip b.heads{color:#ffc040;text-shadow:0 0 6px rgba(255,176,32,.5)}
.cf-picked-strip b.tails{color:#b0c0d0;text-shadow:0 0 6px rgba(160,180,200,.4)}

/* Session history row — last flips as H/T chips */
.cf-history{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,var(--card),var(--surf));
  border:1px solid var(--border);border-radius:14px;
  padding:8px 12px;margin-bottom:12px;gap:8px
}
.cf-history-label{
  font-size:.6rem;font-weight:700;letter-spacing:.14em;color:var(--gray);
  text-transform:uppercase;white-space:nowrap
}
.cf-history-chips{
  display:flex;gap:4px;flex:1;justify-content:flex-end;overflow:hidden
}
.cf-chip{
  width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.58rem;font-weight:900;font-family:var(--mono);
  flex-shrink:0;animation:cfHistoryIn .4s cubic-bezier(.3,1.4,.4,1) both;
  border:1.5px solid transparent
}
.cf-chip.h{
  background:radial-gradient(circle at 35% 35%,#ffe066,#b87800);
  color:#3a2500;border-color:rgba(255,220,80,.6);
  box-shadow:0 0 6px rgba(255,176,32,.4)
}
.cf-chip.t{
  background:radial-gradient(circle at 35% 35%,#d8e8f0,#556070);
  color:#1a2530;border-color:rgba(200,220,240,.5);
  box-shadow:0 0 6px rgba(160,180,200,.3)
}
.cf-chip.win{position:relative}
.cf-chip.lose{opacity:.45;filter:saturate(.5)}

/* Stats strip: streak + best streak */
.cf-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px
}
.cf-stat{
  background:rgba(0,0,0,.35);border:1px solid var(--border);
  border-radius:10px;padding:8px 10px;text-align:center
}
.cf-stat-label{
  font-size:.55rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray);margin-bottom:2px
}
.cf-stat-val{
  font-family:var(--mono);font-weight:900;font-size:1rem;color:var(--gold)
}
.cf-stat.streak.hot .cf-stat-val{
  color:var(--green);animation:cfStreakFlash 1s ease-in-out infinite
}
.cf-stat.streak.cold .cf-stat-val{color:var(--red)}

/* Pick buttons — keep existing .cf-pick-btn but enhance hover + touch */
.cf-pick-btn{border-radius:18px;padding:20px 0;font-weight:800;font-size:1.05rem;letter-spacing:.06em;transition:all .2s;border:2px solid transparent;width:100%;position:relative;overflow:hidden}
.cf-pick-btn:active{transform:scale(.94)}
.cf-pick-btn.heads{background:linear-gradient(135deg,#e8a000,#b87800);color:#fff;border-color:rgba(255,220,80,.3);box-shadow:0 6px 24px rgba(184,120,0,.4)}
.cf-pick-btn.tails{background:linear-gradient(135deg,#4488cc,#224488);color:#fff;border-color:rgba(100,160,220,.3);box-shadow:0 6px 24px rgba(34,68,136,.5)}
.cf-pick-btn.selected{outline:3px solid var(--green);outline-offset:-3px}

.cf-payout-preview{
  text-align:center;font-size:.72rem;color:var(--gray);
  letter-spacing:.12em;text-transform:uppercase;margin:8px 0 4px;font-weight:700
}
.cf-payout-preview b{color:var(--green);font-family:var(--mono);font-size:.9rem;margin-left:6px}

/* ═══ SOLO CRASH — night-sky launchpad, 3D rocket, live chart curve ═══ */
@keyframes crLaunchShake{
  0%,100%{transform:translateY(0)}
  20%{transform:translateY(-1px) translateX(-1px)}
  40%{transform:translateY(-1px) translateX(1px)}
  60%{transform:translateY(1px) translateX(-1px)}
  80%{transform:translateY(1px) translateX(1px)}
}
@keyframes crStarTwinkle{
  0%,100%{opacity:.35}
  50%{opacity:.85}
}
@keyframes crFlameFlicker{
  0%,100%{transform:translateX(-50%) scaleY(1);opacity:.95}
  30%{transform:translateX(-50%) scaleY(1.2);opacity:1}
  60%{transform:translateX(-50%) scaleY(.85);opacity:.8}
}
@keyframes crRocketWobble{
  0%,100%{transform:translate(-50%,-50%) rotate(-2deg)}
  50%{transform:translate(-50%,-50%) rotate(2deg)}
}
@keyframes crCountdownPop{
  0%{transform:translate(-50%,-50%) scale(.3);opacity:0}
  25%{transform:translate(-50%,-50%) scale(1.4);opacity:1}
  75%{transform:translate(-50%,-50%) scale(1.1);opacity:1}
  100%{transform:translate(-50%,-50%) scale(2);opacity:0}
}
@keyframes crExplode{
  0%{transform:translate(-50%,-50%) scale(.3);opacity:0;background:var(--gold)}
  20%{transform:translate(-50%,-50%) scale(2);opacity:1;background:#ff8030}
  60%{transform:translate(-50%,-50%) scale(4);opacity:.85;background:var(--red)}
  100%{transform:translate(-50%,-50%) scale(6.5);opacity:0;background:transparent}
}
@keyframes crCashOutBanner{
  0%{transform:translate(-50%,-100%) scale(.5);opacity:0}
  60%{transform:translate(-50%,0) scale(1.08);opacity:1}
  100%{transform:translate(-50%,0) scale(1);opacity:1}
}
@keyframes crCoinRise{
  0%{transform:translate(var(--cr-cx,0),0) scale(.3);opacity:0}
  20%{opacity:1}
  100%{transform:translate(calc(var(--cr-cx,0) + 10px),-140px) scale(.9);opacity:0}
}
@keyframes crRedFlash{
  0%,100%{background:transparent}
  50%{background:rgba(255,26,42,.15)}
}
@keyframes crMultGlowW{
  0%,100%{text-shadow:0 0 12px rgba(255,255,255,.4),0 0 24px rgba(255,255,255,.2)}
  50%{text-shadow:0 0 18px rgba(255,255,255,.7),0 0 36px rgba(255,255,255,.35)}
}
@keyframes crMultGlowGold{
  0%,100%{text-shadow:0 0 12px var(--goldg),0 0 22px rgba(255,176,32,.3)}
  50%{text-shadow:0 0 20px var(--gold),0 0 40px rgba(255,176,32,.6)}
}
@keyframes crMultGlowRed{
  0%,100%{text-shadow:0 0 12px rgba(255,26,42,.55),0 0 22px rgba(255,26,42,.35)}
  50%{text-shadow:0 0 22px rgba(255,26,42,.9),0 0 44px rgba(255,26,42,.65)}
}
@keyframes crLaunchBtnPulse{
  0%,100%{box-shadow:0 4px 22px rgba(0,232,112,.4),0 0 0 rgba(255,176,32,0)}
  50%{box-shadow:0 4px 28px rgba(0,232,112,.6),0 0 28px rgba(255,176,32,.4)}
}

.cr-sky{
  background:
    radial-gradient(ellipse at 50% 100%,rgba(100,120,255,.12) 0%,transparent 50%),
    radial-gradient(ellipse at 80% 20%,rgba(180,80,255,.08) 0%,transparent 60%),
    linear-gradient(180deg,#020210 0%,#050518 40%,#0a0a20 100%);
  border:1px solid #1a2050;border-radius:20px;padding:14px 14px 10px;
  box-shadow:inset 0 0 50px rgba(0,0,0,.85),0 10px 30px rgba(0,0,0,.7);
  margin-bottom:14px;position:relative;overflow:hidden
}
.cr-sky::before{
  content:"";position:absolute;inset:8px;
  border:1px dashed rgba(0,212,255,.22);border-radius:16px;
  pointer-events:none;z-index:3
}
/* Starfield behind */
.cr-sky::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1px 1px at 30px 40px,rgba(255,255,255,.8),transparent),
    radial-gradient(1px 1px at 80px 90px,rgba(200,220,255,.7),transparent),
    radial-gradient(1.5px 1.5px at 140px 60px,rgba(255,255,255,.9),transparent),
    radial-gradient(1px 1px at 200px 120px,rgba(180,200,255,.7),transparent),
    radial-gradient(1.5px 1.5px at 270px 50px,rgba(255,255,255,.8),transparent),
    radial-gradient(1px 1px at 330px 100px,rgba(220,220,255,.6),transparent),
    radial-gradient(1px 1px at 60px 180px,rgba(255,255,255,.6),transparent),
    radial-gradient(1px 1px at 180px 200px,rgba(200,220,255,.7),transparent),
    radial-gradient(1px 1px at 300px 230px,rgba(255,255,255,.5),transparent),
    radial-gradient(1px 1px at 120px 260px,rgba(180,200,255,.5),transparent);
  animation:crStarTwinkle 3s ease-in-out infinite
}
.cr-sky.crashing{animation:crRedFlash .8s ease}

.cr-header{
  display:flex;justify-content:space-between;align-items:center;
  position:relative;z-index:4;margin-bottom:8px
}
.cr-title{
  color:var(--cyan);font-family:var(--mono);font-weight:900;font-size:.72rem;
  letter-spacing:.18em;text-shadow:0 0 8px rgba(0,212,255,.5)
}
.cr-target-pill{
  display:flex;align-items:center;gap:5px;
  background:rgba(0,212,255,.12);border:1px solid var(--cyan);
  padding:3px 9px;border-radius:10px;
  font-size:.62rem;font-weight:800;letter-spacing:.12em;
  color:var(--cyan);text-transform:uppercase;font-family:var(--mono)
}
.cr-target-pill.cashed{background:rgba(0,232,112,.15);border-color:var(--green);color:var(--green)}
.cr-target-pill.crashed{background:rgba(255,26,42,.15);border-color:var(--red);color:var(--red)}

/* Flight area — rocket flies in here */
.cr-arena{
  position:relative;height:240px;margin-bottom:4px;z-index:2
}
/* Chart line SVG — drawn behind the rocket */
.cr-arena svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.cr-chart-line{
  fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px currentColor);color:var(--gold);
  transition:stroke .2s,color .2s
}
.cr-chart-line.warn{stroke:var(--gold);color:var(--gold)}
.cr-chart-line.danger{stroke:var(--red);color:var(--red)}
.cr-chart-fill{fill:var(--gold);opacity:.16}
.cr-chart-fill.warn{fill:var(--gold)}
.cr-chart-fill.danger{fill:var(--red)}
/* Target line (horizontal dashed) */
.cr-target-line{
  position:absolute;left:10px;right:10px;height:0;
  border-top:1.5px dashed rgba(0,232,112,.5);
  z-index:2;pointer-events:none;
  transition:top .15s linear
}
.cr-target-line::after{
  content:attr(data-label);position:absolute;right:0;top:-9px;
  background:rgba(0,232,112,.2);color:var(--green);
  font-family:var(--mono);font-size:.6rem;font-weight:800;
  padding:1px 6px;border-radius:5px;letter-spacing:.08em;
  border:1px solid rgba(0,232,112,.4)
}
.cr-target-line.hit{
  border-top-color:rgba(0,232,112,.9);
  box-shadow:0 0 10px rgba(0,232,112,.5)
}
.cr-target-line.hit::after{
  background:rgba(0,232,112,.5);color:#fff
}

/* Rocket — positioned absolutely, moved via JS */
.cr-rocket{
  position:absolute;font-size:44px;z-index:4;
  filter:drop-shadow(0 4px 12px rgba(255,176,32,.6));
  animation:crRocketWobble 1.1s ease-in-out infinite;
  transition:transform .1s linear;pointer-events:none
}
.cr-rocket.idle{
  animation:float 2s ease-in-out infinite;
  filter:drop-shadow(0 4px 12px rgba(0,212,255,.5))
}
.cr-rocket.exploded{animation:none;font-size:54px}

/* Flame trail under the rocket */
.cr-flame{
  position:absolute;left:50%;bottom:-18px;
  width:16px;height:28px;border-radius:50% 50% 40% 40% / 30% 30% 70% 70%;
  background:radial-gradient(ellipse at 50% 30%,#fff8c0 0%,#ffc040 40%,#ff6020 75%,transparent 100%);
  filter:blur(1px);
  animation:crFlameFlicker .18s ease-in-out infinite
}

/* Launchpad at the bottom */
.cr-launchpad{
  position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  width:80px;height:12px;z-index:2;
  background:
    repeating-linear-gradient(90deg,#2a2a3a 0 4px,#1a1a28 4px 8px),
    linear-gradient(180deg,#3a3a4a,#1a1a28);
  border-top:1.5px solid #4a4a60;
  border-radius:2px;
  box-shadow:0 -2px 8px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1)
}
.cr-launchpad::before{
  content:"";position:absolute;top:-3px;left:10%;right:10%;
  height:3px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#6a6a80,transparent);
  opacity:.6
}

/* Countdown overlay */
.cr-countdown{
  position:absolute;top:50%;left:50%;z-index:10;
  font-family:var(--display);font-weight:900;font-size:4rem;
  color:var(--cyan);text-shadow:0 0 20px rgba(0,212,255,.8),0 0 40px rgba(0,212,255,.5);
  animation:crCountdownPop 1s cubic-bezier(.3,1.2,.4,1) both;pointer-events:none
}

/* Giant live multiplier readout */
.cr-mult-readout{
  text-align:center;margin:4px 0 8px;position:relative;z-index:4
}
.cr-mult{
  font-family:var(--display);font-weight:900;font-size:3.4rem;line-height:1;
  color:var(--white);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  animation:crMultGlowW 2s ease-in-out infinite;transition:color .3s
}
.cr-mult.warn{color:var(--gold);animation:crMultGlowGold 1.2s ease-in-out infinite}
.cr-mult.danger{color:var(--red);animation:crMultGlowRed .5s ease-in-out infinite}
.cr-mult.safe{color:var(--green);animation:crMultGlowGold 1s ease-in-out infinite}
.cr-mult::after{content:"x";font-size:1.4rem;margin-left:4px;opacity:.7;font-weight:700}

/* Cashed out banner that drops into the arena */
.cr-cashout-banner{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:11;pointer-events:none;
  background:linear-gradient(135deg,var(--green),#00a050);color:#000;
  font-family:var(--display);font-weight:900;font-size:1.1rem;
  padding:10px 22px;border-radius:12px;
  border:2px solid #00ff90;
  box-shadow:0 0 30px rgba(0,232,112,.7),0 8px 24px rgba(0,0,0,.6);
  letter-spacing:.08em;text-align:center;
  animation:crCashOutBanner .55s cubic-bezier(.3,1.5,.4,1) both
}
.cr-cashout-banner .cr-cashout-mult{font-size:1.5rem;display:block;margin-bottom:2px}
.cr-cashout-banner .cr-cashout-payout{font-size:.8rem;color:#003018;letter-spacing:.12em}

/* Coin particles that burst up on cashout */
.cr-coin{
  position:absolute;
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff8c0,#ffc040 45%,#806010);
  box-shadow:0 0 8px rgba(255,200,60,.7);
  pointer-events:none;z-index:9;
  animation:crCoinRise 1s cubic-bezier(.3,.5,.4,1) forwards
}

/* Explosion when rocket crashes */
.cr-explode{
  position:absolute;top:50%;left:50%;
  width:60px;height:60px;border-radius:50%;z-index:8;pointer-events:none;
  animation:crExplode .8s ease-out forwards
}

/* Crash history strip */
.cr-history{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,var(--card),var(--surf));
  border:1px solid var(--border);border-radius:14px;
  padding:8px 12px;margin-bottom:12px;gap:8px
}
.cr-history-label{
  font-size:.6rem;font-weight:700;letter-spacing:.14em;color:var(--gray);
  text-transform:uppercase;white-space:nowrap
}
.cr-history-chips{
  display:flex;gap:4px;flex:1;justify-content:flex-end;overflow:hidden
}
.cr-chip{
  padding:2px 7px;border-radius:6px;
  font-family:var(--mono);font-size:.62rem;font-weight:800;
  border:1px solid transparent;flex-shrink:0;
  animation:fadeIn .3s ease both
}
.cr-chip.safe{background:rgba(0,232,112,.15);color:var(--green);border-color:rgba(0,232,112,.4)}
.cr-chip.mid{background:rgba(255,176,32,.15);color:var(--gold);border-color:rgba(255,176,32,.4)}
.cr-chip.dump{background:rgba(255,26,42,.18);color:var(--red);border-color:rgba(255,26,42,.45)}

/* Pre-launch target picker */
.cr-target-picker{
  background:linear-gradient(135deg,var(--card),var(--surf));
  border:1px solid var(--border);border-radius:14px;
  padding:14px 14px;margin-bottom:12px
}
.cr-target-picker-label{
  font-size:.62rem;font-weight:800;letter-spacing:.16em;
  color:var(--gray);text-transform:uppercase;margin-bottom:8px
}
.cr-target-pills{
  display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:10px
}
.cr-target-pill-btn{
  padding:10px 0;border-radius:10px;
  background:var(--surf);border:1.5px solid var(--border);
  color:var(--gray);font-family:var(--mono);font-weight:800;font-size:.82rem;
  cursor:pointer;transition:all .15s
}
.cr-target-pill-btn:active{transform:scale(.94)}
.cr-target-pill-btn.selected{
  background:linear-gradient(135deg,rgba(0,212,255,.15),rgba(0,212,255,.05));
  border-color:var(--cyan);color:var(--cyan);
  box-shadow:0 0 14px rgba(0,212,255,.3)
}
.cr-custom-row{
  display:flex;gap:8px;align-items:center
}
.cr-custom-input{
  flex:1;background:var(--bg);border:1.5px solid var(--border);
  border-radius:10px;padding:10px 12px;
  color:var(--gold);font-family:var(--mono);font-weight:800;font-size:.95rem;
  text-align:center;outline:none;transition:border-color .15s
}
.cr-custom-input:focus{border-color:var(--cyan)}
.cr-payout-preview{
  background:rgba(0,0,0,.45);border:1px solid rgba(0,232,112,.3);
  border-radius:10px;padding:8px 12px;margin-top:10px;
  text-align:center;font-size:.72rem;color:var(--gray);
  letter-spacing:.12em;text-transform:uppercase;font-weight:700
}
.cr-payout-preview b{color:var(--green);font-family:var(--mono);font-size:1rem;margin-left:8px}

.cr-launch-btn{
  background:linear-gradient(135deg,var(--green),#00b858);color:#000;
  animation:crLaunchBtnPulse 1.8s ease-in-out infinite;
  font-weight:900;font-size:1.15rem;letter-spacing:.08em
}

/* ═══ SOLO PLINKO — themed casino board, multi-ball drop, session history ═══ */
@keyframes pkBucketPop{
  0%{transform:translateY(0) scale(1)}
  30%{transform:translateY(-8px) scale(1.18)}
  60%{transform:translateY(2px) scale(.95)}
  100%{transform:translateY(0) scale(1)}
}
@keyframes pkBucketWin{
  0%{transform:translateY(0) scale(1);box-shadow:0 0 0 currentColor}
  50%{transform:translateY(-6px) scale(1.22);box-shadow:0 0 24px currentColor}
  100%{transform:translateY(0) scale(1.05);box-shadow:0 0 14px currentColor}
}
@keyframes pkTotalTick{
  0%{transform:scale(1)}
  40%{transform:scale(1.18)}
  100%{transform:scale(1)}
}
@keyframes pkLightSweep{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}
@keyframes pkBallCounterPop{
  0%{transform:scale(1)}
  50%{transform:scale(1.3);color:var(--white)}
  100%{transform:scale(1)}
}

/* The casino plinko cabinet stage */
.pk-cabinet{
  background:
    radial-gradient(ellipse at 50% 0%,rgba(120,80,255,.18) 0%,transparent 55%),
    radial-gradient(ellipse at 50% 100%,rgba(0,212,255,.08) 0%,transparent 60%),
    linear-gradient(180deg,#070418 0%,#04030f 60%,#020108 100%);
  border:1px solid #2a1a55;border-radius:20px;padding:14px 12px 8px;
  box-shadow:inset 0 0 50px rgba(0,0,0,.85),0 10px 30px rgba(0,0,0,.6);
  margin-bottom:12px;position:relative;overflow:hidden
}
.pk-cabinet::before{
  content:"";position:absolute;inset:8px;
  border:1px dashed rgba(140,100,255,.22);border-radius:16px;
  pointer-events:none;z-index:3
}
/* Subtle light sweep across the top — feels like stadium spotlights */
.pk-cabinet::after{
  content:"";position:absolute;top:0;left:0;right:0;height:50px;
  background:linear-gradient(90deg,transparent,rgba(180,140,255,.08),transparent);
  pointer-events:none;z-index:2;
  animation:pkLightSweep 5s linear infinite
}

.pk-header{
  display:flex;justify-content:space-between;align-items:center;
  position:relative;z-index:4;margin-bottom:8px
}
.pk-title{
  color:rgba(180,140,255,.95);font-family:var(--mono);font-weight:900;
  font-size:.7rem;letter-spacing:.18em;
  text-shadow:0 0 8px rgba(140,100,255,.6)
}
.pk-readout{
  background:rgba(0,0,0,.55);border:1px solid rgba(140,100,255,.4);
  color:var(--gold);padding:3px 10px;border-radius:10px;
  font-family:var(--mono);font-size:.78rem;font-weight:800
}

.pk-canvas-wrap{position:relative;z-index:2}
.pk-canvas{display:block;margin:0 auto}

/* Buckets row — replaces the old .plinko-buckets */
.pk-buckets{
  display:flex;gap:2px;margin:6px auto 0;max-width:340px;
  position:relative;z-index:2
}
.pk-bucket{
  flex:1;border-radius:6px 6px 8px 8px;padding:5px 0;
  text-align:center;font-family:var(--mono);font-size:.58rem;font-weight:800;
  transition:all .2s;position:relative;overflow:hidden
}
.pk-bucket.tier-safe{
  background:rgba(0,180,80,.1);border:1px solid rgba(0,200,80,.2);
  color:rgba(0,232,112,.85)
}
.pk-bucket.tier-mid{
  background:rgba(255,176,32,.1);border:1px solid rgba(255,176,32,.2);
  color:rgba(255,200,60,.9)
}
.pk-bucket.tier-hot{
  background:rgba(255,80,30,.12);border:1px solid rgba(255,80,30,.25);
  color:rgba(255,140,80,.95)
}
.pk-bucket.tier-jackpot{
  background:linear-gradient(180deg,rgba(255,30,80,.18),rgba(255,176,32,.12));
  border:1px solid rgba(255,80,120,.45);
  color:#fff;text-shadow:0 0 6px rgba(255,80,120,.8)
}
.pk-bucket.lit{animation:pkBucketWin .55s cubic-bezier(.2,1.3,.4,1) both}
.pk-bucket .pk-bucket-counter{
  position:absolute;top:-4px;right:-4px;
  background:var(--gold);color:#000;border-radius:50%;
  width:14px;height:14px;font-size:.55rem;line-height:14px;
  font-weight:900;display:none;
  animation:pkBucketPop .3s ease;
  box-shadow:0 0 6px var(--goldg)
}
.pk-bucket .pk-bucket-counter.show{display:block}

/* Live total readout that updates as balls land */
.pk-totals{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px
}
.pk-total-card{
  background:linear-gradient(135deg,var(--card),var(--surf));
  border:1px solid var(--border);border-radius:12px;
  padding:10px 12px;position:relative;overflow:hidden
}
.pk-total-card.payout{border-color:rgba(0,232,112,.3)}
.pk-total-label{
  font-size:.55rem;font-weight:800;letter-spacing:.18em;
  color:var(--gray);text-transform:uppercase;margin-bottom:3px
}
.pk-total-val{
  font-family:var(--mono);font-weight:900;font-size:1.1rem;
  color:var(--white);transition:color .2s
}
.pk-total-card.payout .pk-total-val{color:var(--gold)}
.pk-total-val.win{color:var(--green)}
.pk-total-val.loss{color:var(--red)}
.pk-total-val.tick{animation:pkTotalTick .35s ease}
.pk-balls-counter{font-family:var(--mono);color:var(--cyan);font-weight:900;display:inline-block;transition:transform .2s}
.pk-balls-counter.bump{animation:pkBallCounterPop .3s ease}

/* Ball-count selector */
.pk-balls-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px
}
.pk-balls-btn{
  background:var(--card);border:1.5px solid var(--border);color:var(--gray);
  border-radius:12px;padding:12px 0;
  font-family:var(--mono);font-weight:900;font-size:.95rem;
  cursor:pointer;transition:all .15s;position:relative
}
.pk-balls-btn:active{transform:scale(.94)}
.pk-balls-btn.selected{
  background:linear-gradient(135deg,rgba(140,100,255,.18),rgba(140,100,255,.05));
  border-color:rgba(180,140,255,.7);color:rgba(180,140,255,1);
  box-shadow:0 0 14px rgba(140,100,255,.3)
}
.pk-balls-btn .pk-balls-sub{
  display:block;font-size:.55rem;font-weight:700;
  letter-spacing:.14em;opacity:.7;margin-top:2px
}

/* Risk selector — keep the existing .plinko-risk-btn rules but enhance */
.plinko-risk-btn{border-radius:14px;padding:14px 0;font-weight:800;font-size:.88rem;transition:all .18s;width:100%;border:2px solid transparent;cursor:pointer}
.plinko-risk-btn:active{transform:scale(.93)}

/* Session history strip */
.pk-history{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,var(--card),var(--surf));
  border:1px solid var(--border);border-radius:14px;
  padding:8px 12px;margin-bottom:10px;gap:8px
}
.pk-history-label{
  font-size:.6rem;font-weight:700;letter-spacing:.14em;color:var(--gray);
  text-transform:uppercase;white-space:nowrap
}
.pk-history-chips{
  display:flex;gap:4px;flex:1;justify-content:flex-end;overflow:hidden
}
.pk-chip{
  padding:2px 7px;border-radius:6px;
  font-family:var(--mono);font-size:.62rem;font-weight:800;
  border:1px solid transparent;flex-shrink:0;
  animation:fadeIn .3s ease both
}
.pk-chip.s{background:rgba(0,232,112,.15);color:var(--green);border-color:rgba(0,232,112,.4)}
.pk-chip.m{background:rgba(255,176,32,.15);color:var(--gold);border-color:rgba(255,176,32,.4)}
.pk-chip.h{background:rgba(255,80,30,.18);color:#ff9050;border-color:rgba(255,80,30,.45)}
.pk-chip.j{background:linear-gradient(135deg,rgba(255,30,80,.25),rgba(255,176,32,.18));color:#fff;border-color:rgba(255,80,120,.6);text-shadow:0 0 4px rgba(255,80,120,.6)}
.pk-chip.l{background:rgba(255,26,42,.15);color:var(--red);border-color:rgba(255,26,42,.4);opacity:.85}

/* Bet preview showing total cost */
.pk-bet-preview{
  background:rgba(0,0,0,.35);border:1px solid var(--border);border-radius:10px;
  padding:7px 12px;margin-bottom:10px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gray);font-weight:700
}
.pk-bet-preview b{color:var(--gold);font-family:var(--mono);font-size:.82rem}

/* ═════════════════════════════════════════════════════════════════ */
/* PVP COIN FLIP — split-screen arena, live polling, reveal sync    */
/* ═════════════════════════════════════════════════════════════════ */

/* The shared arena container — dark-felt split table with a center divider */
.pvp-arena{
  background:radial-gradient(ellipse at 50% 50%,#0a1820 0%,#07101a 60%,#04080f 100%);
  border:1px solid rgba(255,176,32,.18);border-radius:22px;
  padding:18px 14px 16px;position:relative;overflow:hidden;margin-bottom:14px;
  box-shadow:inset 0 0 60px rgba(0,0,0,.85),0 10px 40px rgba(0,0,0,.75)
}
.pvp-arena::before{
  content:"";position:absolute;inset:8px;border:1px dashed rgba(232,168,32,.14);
  border-radius:16px;pointer-events:none;z-index:0
}

/* Match header: pot, round/phase, turn timer */
.pvp-match-header{
  position:relative;z-index:2;display:flex;justify-content:space-between;
  align-items:center;margin-bottom:12px;gap:8px
}
.pvp-phase-label{
  color:rgba(232,168,32,.85);font-size:.6rem;font-weight:800;
  letter-spacing:.22em;text-transform:uppercase;font-family:var(--display);
  text-shadow:0 0 8px var(--goldg)
}
.pvp-pot-chip{
  background:linear-gradient(135deg,rgba(255,176,32,.2),rgba(255,176,32,.08));
  color:var(--gold);padding:5px 12px;border-radius:12px;
  font-family:var(--mono);font-weight:800;font-size:.82rem;
  border:1px solid rgba(255,176,32,.4);
  box-shadow:0 0 12px rgba(255,176,32,.2)
}
.pvp-pot-chip .lbl{color:rgba(232,168,32,.55);font-size:.58rem;margin-right:4px;letter-spacing:.15em}

/* Turn-timer arc (SVG circle) */
.pvp-timer{
  position:relative;width:38px;height:38px;flex-shrink:0
}
.pvp-timer svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.pvp-timer-bg{fill:none;stroke:rgba(255,255,255,.08);stroke-width:3}
.pvp-timer-fg{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;
  transition:stroke-dashoffset .3s linear,stroke .3s}
.pvp-timer.warn .pvp-timer-fg{stroke:#ff9050}
.pvp-timer.critical .pvp-timer-fg{stroke:var(--red);animation:pvpTimerPulse .6s ease-in-out infinite}
.pvp-timer-text{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:800;font-size:.7rem;color:var(--gold)
}
.pvp-timer.critical .pvp-timer-text{color:var(--red)}
@keyframes pvpTimerPulse{0%,100%{filter:drop-shadow(0 0 4px var(--red))}50%{filter:drop-shadow(0 0 14px var(--red))}}

/* The split head-to-head layout — players stack vertically on phone */
.pvp-split{
  display:grid;grid-template-rows:1fr auto 1fr;gap:10px;
  position:relative;z-index:1
}
.pvp-player-panel{
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,rgba(255,255,255,.02),rgba(255,255,255,.005));
  border:1px solid rgba(255,255,255,.06);border-radius:14px;
  padding:10px 12px;position:relative;transition:all .3s;
  min-height:64px
}
.pvp-player-panel.you{
  border-color:rgba(255,176,32,.35);
  background:linear-gradient(135deg,rgba(255,176,32,.06),rgba(255,176,32,.01))
}
.pvp-player-panel.opponent{
  border-color:rgba(80,160,255,.3);
  background:linear-gradient(135deg,rgba(80,160,255,.05),rgba(80,160,255,.01))
}
.pvp-player-panel.thinking{animation:pvpThinkingPulse 1.4s ease-in-out infinite}
.pvp-player-panel.winner{
  border-color:var(--green);
  background:linear-gradient(135deg,rgba(0,232,112,.18),rgba(0,232,112,.03));
  box-shadow:0 0 24px rgba(0,232,112,.35)
}
.pvp-player-panel.loser{
  border-color:rgba(255,26,42,.4);opacity:.6;
  background:linear-gradient(135deg,rgba(255,26,42,.08),rgba(255,26,42,.01))
}
@keyframes pvpThinkingPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(80,160,255,.4)}
  50%{box-shadow:0 0 0 8px rgba(80,160,255,0)}
}

/* Avatar = initials on a generated-color disc */
.pvp-avatar{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:1.1rem;color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,.5);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.25),inset 0 -2px 4px rgba(0,0,0,.3),
             0 4px 10px rgba(0,0,0,.5);
  position:relative;overflow:hidden
}
.pvp-avatar::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(255,255,255,.12);pointer-events:none
}
.pvp-player-panel.you .pvp-avatar{box-shadow:inset 0 2px 4px rgba(255,255,255,.25),inset 0 -2px 4px rgba(0,0,0,.3),0 0 14px rgba(255,176,32,.5)}
.pvp-player-panel.opponent .pvp-avatar{box-shadow:inset 0 2px 4px rgba(255,255,255,.25),inset 0 -2px 4px rgba(0,0,0,.3),0 0 14px rgba(80,160,255,.45)}
.pvp-player-panel.winner .pvp-avatar{box-shadow:inset 0 2px 4px rgba(255,255,255,.25),inset 0 -2px 4px rgba(0,0,0,.3),0 0 20px var(--green)}

.pvp-pname{flex:1;min-width:0}
.pvp-pname .nm{
  color:var(--white);font-weight:700;font-size:.92rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block
}
.pvp-pname .sub{
  color:var(--gray);font-size:.62rem;letter-spacing:.15em;
  text-transform:uppercase;margin-top:2px;display:block
}
.pvp-player-panel.you .pvp-pname .sub{color:var(--gold)}
.pvp-player-panel.opponent .pvp-pname .sub{color:#6bafff}

/* Pick badge — the little tag that flies in when a side commits */
.pvp-pick-badge{
  padding:6px 10px;border-radius:10px;font-family:var(--mono);
  font-size:.68rem;font-weight:800;letter-spacing:.1em;
  border:1px solid transparent;white-space:nowrap;
  transition:all .3s
}
.pvp-pick-badge.waiting{
  color:var(--dim);background:rgba(255,255,255,.02);
  border-color:rgba(255,255,255,.05);font-size:.6rem;letter-spacing:.15em
}
.pvp-pick-badge.thinking{
  color:#6bafff;background:rgba(80,160,255,.08);
  border-color:rgba(80,160,255,.3);
  animation:pvpThinkingDots 1.4s ease-in-out infinite
}
.pvp-pick-badge.locked{
  color:var(--gold);background:rgba(255,176,32,.12);
  border-color:rgba(255,176,32,.5);
  animation:pvpLockIn .4s cubic-bezier(.2,1.4,.4,1) both
}
.pvp-pick-badge.heads{color:var(--gold);background:rgba(255,176,32,.18);border-color:rgba(255,176,32,.55)}
.pvp-pick-badge.tails{color:#bcd;background:rgba(180,200,230,.15);border-color:rgba(180,200,230,.45)}
@keyframes pvpThinkingDots{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes pvpLockIn{
  0%{transform:translateX(30px) scale(.5);opacity:0}
  60%{transform:translateX(-4px) scale(1.1);opacity:1}
  100%{transform:translateX(0) scale(1);opacity:1}
}

/* The divider between players — holds the coin or a VS banner */
.pvp-divider{
  display:flex;align-items:center;justify-content:center;
  position:relative;min-height:150px;gap:12px;
  padding:8px 0
}
.pvp-divider::before,.pvp-divider::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,176,32,.25),transparent);
  pointer-events:none
}
.pvp-divider::before{top:6px}
.pvp-divider::after{bottom:6px}

.pvp-vs{
  font-family:var(--display);font-size:1.8rem;font-weight:900;
  color:var(--gold);text-shadow:0 0 16px var(--goldg),0 0 32px rgba(255,176,32,.35);
  letter-spacing:.1em
}

/* 3D coin used in the reveal phase — sits inside .pvp-divider */
.pvp-coin-wrap{
  perspective:800px;width:140px;height:140px;
  position:relative;z-index:3
}
.pvp-coin{
  width:140px;height:140px;position:relative;transform-style:preserve-3d;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.75));will-change:transform
}
.pvp-coin-face,.pvp-coin-tail{
  position:absolute;inset:0;border-radius:50%;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px
}
.pvp-coin-face{
  background:radial-gradient(circle at 35% 35%,#ffe066,#e8a000 50%,#b87800 100%);
  border:3px solid rgba(255,220,80,.5);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.4),inset 0 -2px 4px rgba(0,0,0,.3)
}
.pvp-coin-tail{
  background:radial-gradient(circle at 35% 35%,#d8e8f0,#8899b0 50%,#556070 100%);
  border:3px solid rgba(200,220,240,.4);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.3),inset 0 -2px 4px rgba(0,0,0,.4);
  transform:rotateY(180deg)
}
.pvp-coin-sym{font-size:46px;line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.pvp-coin-lbl{font-size:.5rem;font-weight:900;letter-spacing:.22em;text-transform:uppercase}
.pvp-coin-face .pvp-coin-lbl{color:#7a5000}
.pvp-coin-tail .pvp-coin-lbl{color:#3a4f60}

/* Idle coin during pick phase — slow hover-spin */
.pvp-coin-wrap.idle .pvp-coin{animation:pvpCoinIdle 4s linear infinite}
@keyframes pvpCoinIdle{
  0%{transform:rotateY(0) translateY(0)}
  50%{transform:rotateY(180deg) translateY(-6px)}
  100%{transform:rotateY(360deg) translateY(0)}
}
/* Reveal toss animations — one shot, land on the correct face */
.pvp-coin-wrap.toss-heads .pvp-coin{animation:pvpCoinTossHeads 2s cubic-bezier(.3,0,.35,1) forwards}
.pvp-coin-wrap.toss-tails .pvp-coin{animation:pvpCoinTossTails 2s cubic-bezier(.3,0,.35,1) forwards}
@keyframes pvpCoinTossHeads{
  0%{transform:translateY(0) rotateY(0deg)}
  35%{transform:translateY(-70px) rotateY(1080deg)}
  70%{transform:translateY(8px) rotateY(2160deg)}
  100%{transform:translateY(0) rotateY(2880deg) scale(1.05)}
}
@keyframes pvpCoinTossTails{
  0%{transform:translateY(0) rotateY(0deg)}
  35%{transform:translateY(-70px) rotateY(1260deg)}
  70%{transform:translateY(8px) rotateY(2340deg)}
  100%{transform:translateY(0) rotateY(3060deg) scale(1.05)}
}

/* Pick buttons — thumb-zone, heads left, tails right */
.pvp-pick-row{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px
}
.pvp-pick-btn{
  border-radius:14px;padding:18px 0;font-weight:800;
  font-family:var(--display);font-size:1rem;letter-spacing:.14em;
  text-transform:uppercase;transition:all .2s;
  position:relative;overflow:hidden;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px
}
.pvp-pick-btn:active{transform:scale(.95)}
.pvp-pick-btn.heads{
  background:linear-gradient(135deg,#ffc040,#cc8800);color:#2a1a00;
  box-shadow:0 4px 16px rgba(255,176,32,.3),inset 0 1px 0 rgba(255,255,255,.3)
}
.pvp-pick-btn.tails{
  background:linear-gradient(135deg,#b8c8d8,#556070);color:#0a1218;
  box-shadow:0 4px 16px rgba(180,200,230,.25),inset 0 1px 0 rgba(255,255,255,.3)
}
.pvp-pick-btn .sym{font-size:1.4rem;line-height:1}
.pvp-pick-btn.locked-in{
  animation:pvpBtnLockedIn .5s cubic-bezier(.2,1.6,.4,1) both;
  pointer-events:none;opacity:.6
}
@keyframes pvpBtnLockedIn{
  0%{transform:scale(1)}
  40%{transform:scale(.88)}
  100%{transform:scale(.92)}
}

/* Waiting / scanner lobby screen — for the creator before anyone joins */
.pvp-scanner{
  position:relative;min-height:110px;display:flex;
  align-items:center;justify-content:center;gap:14px;
  padding:12px 16px
}
.pvp-scanner-line{
  position:absolute;top:50%;left:12px;right:12px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(0,212,255,.6),transparent);
  animation:pvpScannerSweep 2.4s linear infinite;pointer-events:none
}
@keyframes pvpScannerSweep{
  0%{transform:translateX(-100%);opacity:0}
  20%,80%{opacity:1}
  100%{transform:translateX(100%);opacity:0}
}
.pvp-scanner-ring{
  width:62px;height:62px;border-radius:50%;flex-shrink:0;
  border:2px dashed rgba(0,212,255,.4);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;animation:spinW 6s linear infinite;
  background:radial-gradient(circle,rgba(0,212,255,.12),transparent 70%)
}
.pvp-scanner-text{flex:1;min-width:0}
.pvp-scanner-text .title{
  display:block;color:var(--cyan);font-family:var(--display);
  font-weight:800;font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;
  text-shadow:0 0 12px var(--cyang)
}
.pvp-scanner-text .sub{
  display:block;color:var(--gray);font-size:.72rem;margin-top:3px;letter-spacing:.06em
}

/* Reveal countdown (3,2,1,REVEAL!) overlay */
.pvp-reveal-countdown{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:5
}
.pvp-reveal-countdown .n{
  font-family:var(--display);font-weight:900;font-size:5rem;
  color:var(--gold);text-shadow:0 0 30px var(--gold),0 0 60px rgba(255,176,32,.5);
  animation:pvpCountTick .7s cubic-bezier(.2,1.4,.4,1) both
}
.pvp-reveal-countdown .n.go{color:var(--green);text-shadow:0 0 30px var(--green),0 0 60px rgba(0,232,112,.5)}
@keyframes pvpCountTick{
  0%{opacity:0;transform:scale(1.8)}
  20%{opacity:1;transform:scale(.95)}
  100%{opacity:0;transform:scale(.7)}
}

/* Result banner that drops in after the coin lands */
.pvp-result-banner{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.5);
  padding:12px 24px;border-radius:14px;
  font-family:var(--display);font-weight:900;font-size:1.4rem;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;z-index:4;opacity:0;
  animation:pvpBannerDrop .6s cubic-bezier(.2,1.4,.4,1) forwards
}
.pvp-result-banner.win{
  background:linear-gradient(135deg,rgba(0,232,112,.95),rgba(0,180,88,.95));
  color:#001a08;box-shadow:0 0 40px var(--green),0 8px 20px rgba(0,0,0,.6)
}
.pvp-result-banner.lose{
  background:linear-gradient(135deg,rgba(255,26,42,.95),rgba(180,20,30,.95));
  color:#fff;box-shadow:0 0 40px var(--red),0 8px 20px rgba(0,0,0,.6)
}
@keyframes pvpBannerDrop{
  0%{transform:translate(-50%,-120%) scale(.5);opacity:0}
  60%{transform:translate(-50%,-50%) scale(1.08);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1);opacity:1}
}

/* Resume-match banner on arena home */
.pvp-resume-banner{
  background:linear-gradient(135deg,rgba(255,176,32,.18),rgba(255,176,32,.04));
  border:1px solid rgba(255,176,32,.45);border-radius:14px;
  padding:12px 14px;margin-bottom:14px;
  display:flex;align-items:center;gap:12px;
  animation:pvpResumeGlow 2s ease-in-out infinite;cursor:pointer;
  transition:transform .2s
}
.pvp-resume-banner:active{transform:scale(.97)}
@keyframes pvpResumeGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(255,176,32,.3)}
  50%{box-shadow:0 0 0 6px rgba(255,176,32,0)}
}
.pvp-resume-icon{font-size:28px;filter:drop-shadow(0 0 12px var(--goldg))}
.pvp-resume-text{flex:1;min-width:0}
.pvp-resume-text .ln1{display:block;font-family:var(--display);font-weight:800;
  color:var(--gold);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}
.pvp-resume-text .ln2{display:block;color:var(--gray);font-size:.72rem;margin-top:2px}
.pvp-resume-cta{
  color:var(--gold);font-family:var(--display);font-weight:800;font-size:.75rem;
  letter-spacing:.12em;white-space:nowrap
}

/* Lobby list row — with "YOUR LOBBY" and time-remaining chip */
.pvp-lobby-row{
  background:linear-gradient(135deg,var(--card),var(--surf));
  border:1px solid var(--border);border-radius:14px;
  padding:12px 14px;margin-bottom:8px;
  display:flex;align-items:center;gap:12px;
  animation:fadeIn .3s ease
}
.pvp-lobby-row.mine{
  border-color:rgba(255,176,32,.45);
  background:linear-gradient(135deg,rgba(255,176,32,.1),rgba(255,176,32,.02))
}
.pvp-lobby-emoji{font-size:24px;flex-shrink:0}
.pvp-lobby-meta{flex:1;min-width:0}
.pvp-lobby-meta .nm{
  font-weight:700;font-size:.9rem;color:var(--white);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block
}
.pvp-lobby-meta .sub{
  color:var(--dim);font-size:.7rem;margin-top:2px;letter-spacing:.06em;
  font-family:var(--mono);display:block
}
.pvp-lobby-ttl{
  font-family:var(--mono);font-size:.65rem;color:var(--gray);
  padding:3px 8px;border-radius:8px;background:rgba(0,0,0,.3);
  border:1px solid var(--border)
}
.pvp-lobby-ttl.low{color:#ff9050;border-color:rgba(255,140,60,.4)}

/* Picked-side glow — the side on each panel that shows the player's pick */
.pvp-side-glow{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;pointer-events:none;
  animation:fadeIn .3s ease
}
.pvp-side-glow.heads{
  background:radial-gradient(circle,#ffe066,#b87800);
  box-shadow:0 0 14px rgba(255,176,32,.7),inset 0 1px 2px rgba(255,255,255,.4)
}
.pvp-side-glow.tails{
  background:radial-gradient(circle,#d8e8f0,#556070);
  box-shadow:0 0 14px rgba(180,200,230,.6),inset 0 1px 2px rgba(255,255,255,.3)
}

/* Session stats strip at arena home */
.pvp-session-stats{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:14px
}
.pvp-session-stat{
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:10px 8px;text-align:center
}
.pvp-session-stat .lbl{
  display:block;color:var(--dim);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:3px
}
.pvp-session-stat .val{
  display:block;font-family:var(--mono);font-weight:800;font-size:1rem;color:var(--white)
}
.pvp-session-stat.w .val{color:var(--green)}
.pvp-session-stat.l .val{color:var(--red)}
.pvp-session-stat.s .val{color:var(--gold)}

/* Connection / error banner (appears on polling failures) */
.pvp-conn-banner{
  position:fixed;top:60px;left:50%;transform:translateX(-50%);
  background:rgba(255,140,60,.95);color:#1a0a00;
  padding:8px 16px;border-radius:10px;font-size:.78rem;font-weight:800;
  letter-spacing:.08em;z-index:200;
  display:flex;align-items:center;gap:8px;
  box-shadow:0 4px 16px rgba(255,140,60,.4);
  animation:fadeIn .3s ease
}
.pvp-conn-banner .dot{
  width:8px;height:8px;border-radius:50%;background:#1a0a00;
  animation:pulse .8s ease infinite alternate
}

/* ═════════════════════════════════════════════════════════════════ */
/* PVP DICE DUEL — two goblets on felt, simultaneous tumble,        */
/* visible tiebreak reroll rounds                                   */
/* ═════════════════════════════════════════════════════════════════ */

/* Wrapper that holds the two dice side-by-side in the split-divider.
   Uses the existing .pvp-divider; this inner wrapper just lays out two dice. */
.pvpd-stage{
  display:grid;grid-template-columns:1fr auto 1fr;gap:14px;
  align-items:center;justify-items:center;width:100%;
  position:relative;z-index:2
}
.pvpd-cell{
  width:96px;height:96px;position:relative;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.7))
}
.pvpd-cell .dice-face-el{
  width:96px;height:96px;border-radius:16px;padding:12px
}
.pvpd-cell .dp2{
  width:16px;height:16px
}
/* Smaller pip sizing for the PvP dice — the stock solo dice use 150px, ours are 96px */
.pvpd-cell.you .dice-face-el{
  background:linear-gradient(145deg,#f5e8c0 0%,#e8d090 40%,#d8b860 100%);
  border:2px solid rgba(255,220,120,.7);
  box-shadow:inset 0 3px 8px rgba(255,255,255,.6),inset 0 -3px 8px rgba(0,0,0,.2),
             0 0 18px rgba(255,176,32,.4),0 8px 24px rgba(0,0,0,.7)
}
.pvpd-cell.you .dp2{background:radial-gradient(circle at 38% 32%,#5a3800,#2a1a00);box-shadow:inset 0 2px 4px rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.6)}
.pvpd-cell.opp .dice-face-el{
  background:linear-gradient(145deg,#dce4f0 0%,#a8b8cc 40%,#6a7a8c 100%);
  border:2px solid rgba(200,220,240,.6);
  box-shadow:inset 0 3px 8px rgba(255,255,255,.5),inset 0 -3px 8px rgba(0,0,0,.25),
             0 0 18px rgba(80,160,255,.35),0 8px 24px rgba(0,0,0,.7)
}
.pvpd-cell.opp .dp2{background:radial-gradient(circle at 38% 32%,#18284a,#05101f);box-shadow:inset 0 2px 4px rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.6)}

/* Hidden (un-rolled) state: an opaque shell with a "?" centred. */
.pvpd-cell.hidden .dice-face-el{
  background:linear-gradient(135deg,#1a1f2c 0%,#0c1018 100%);
  border:2px dashed rgba(255,255,255,.1);
  box-shadow:inset 0 0 20px rgba(0,0,0,.7),0 8px 20px rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;padding:0
}
.pvpd-cell.hidden .dice-face-el::after{
  content:"?";color:rgba(255,255,255,.18);font-family:var(--display);
  font-weight:900;font-size:48px;text-shadow:0 0 12px rgba(255,255,255,.15)
}
.pvpd-cell.hidden .dice-face-el > div{display:none}

/* Tumbling state — rapid face swaps during the roll. The inner face takes the animation. */
@keyframes pvpdTumble{
  0%{transform:scale(1) rotate(0deg)}
  25%{transform:scale(1.06) rotate(-8deg)}
  50%{transform:scale(.94) rotate(6deg)}
  75%{transform:scale(1.04) rotate(-4deg)}
  100%{transform:scale(1) rotate(0deg)}
}
.pvpd-cell.tumbling .dice-face-el{animation:pvpdTumble .12s linear infinite}

/* Land animation: heavy bounce on the final face */
@keyframes pvpdLand{
  0%{transform:translateY(-14px) scale(1.18) rotate(-5deg)}
  55%{transform:translateY(6px) scale(.94) rotate(2deg)}
  80%{transform:translateY(-2px) scale(1.03) rotate(0deg)}
  100%{transform:translateY(0) scale(1) rotate(0deg)}
}
.pvpd-cell.landed .dice-face-el{animation:pvpdLand .55s cubic-bezier(.2,1.3,.3,1) both}

/* Winner / loser highlight on the resolved dice */
@keyframes pvpdWinPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(0,232,112,0),0 8px 24px rgba(0,0,0,.7)}
  50%{box-shadow:0 0 0 10px rgba(0,232,112,.18),0 0 28px rgba(0,232,112,.55),0 8px 24px rgba(0,0,0,.7)}
}
.pvpd-cell.winner .dice-face-el{animation:pvpdWinPulse 1s ease infinite}
.pvpd-cell.winner{filter:drop-shadow(0 0 18px rgba(0,232,112,.5))}
.pvpd-cell.loser .dice-face-el{opacity:.55;filter:saturate(.5)}

/* Value readout under each die: the rolled number, bold and display-font */
.pvpd-value{
  display:block;text-align:center;margin-top:6px;
  font-family:var(--display);font-weight:900;font-size:1.4rem;
  color:rgba(255,255,255,.7);line-height:1;letter-spacing:.04em;
  min-height:1.4rem;
  text-shadow:0 0 12px rgba(255,255,255,.15)
}
.pvpd-cell.you .pvpd-value{color:var(--gold);text-shadow:0 0 14px var(--goldg)}
.pvpd-cell.opp .pvpd-value{color:#6bafff;text-shadow:0 0 14px rgba(80,160,255,.3)}
.pvpd-cell.winner .pvpd-value{color:var(--green);text-shadow:0 0 16px var(--green)}
.pvpd-cell.loser .pvpd-value{opacity:.5}

/* Center "VS" between the two dice */
.pvpd-vs{
  font-family:var(--display);font-weight:900;font-size:1.4rem;
  color:var(--gold);text-shadow:0 0 14px var(--goldg);
  letter-spacing:.1em;align-self:center
}
.pvpd-vs.tied{color:var(--red);text-shadow:0 0 14px rgba(255,26,42,.6);animation:shake .35s ease infinite}

/* Roll button — only rendered when it's your move */
.pvpd-roll-btn{
  background:linear-gradient(135deg,#ffc040,#cc8800);color:#2a1a00;
  border-radius:14px;padding:20px 0;font-weight:900;
  font-family:var(--display);font-size:1.15rem;letter-spacing:.18em;
  text-transform:uppercase;transition:all .2s;width:100%;
  box-shadow:0 6px 20px rgba(255,176,32,.35),inset 0 1px 0 rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;gap:10px
}
.pvpd-roll-btn:active{transform:scale(.95)}
.pvpd-roll-btn .die-icon{font-size:1.6rem;animation:pvpdIconShake 2s ease-in-out infinite}
@keyframes pvpdIconShake{
  0%,90%,100%{transform:rotate(0)}
  93%{transform:rotate(-14deg)}
  96%{transform:rotate(10deg)}
  98%{transform:rotate(-4deg)}
}
.pvpd-roll-btn.locked-in{animation:pvpBtnLockedIn .5s cubic-bezier(.2,1.6,.4,1) both;pointer-events:none;opacity:.6}

/* Tiebreak banner — drops over the arena when a tie triggers a reroll */
.pvpd-tie-banner{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.5);
  padding:10px 22px;border-radius:12px;z-index:6;opacity:0;
  background:linear-gradient(135deg,rgba(255,26,42,.95),rgba(180,20,30,.95));
  color:#fff;font-family:var(--display);font-weight:900;
  font-size:1rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 0 30px var(--red),0 8px 20px rgba(0,0,0,.6);
  animation:pvpBannerDrop .55s cubic-bezier(.2,1.4,.4,1) forwards
}
.pvpd-tie-banner .sub{
  display:block;font-size:.6rem;margin-top:2px;opacity:.8;letter-spacing:.12em
}

/* Tiebreak round history strip under the arena */
.pvpd-history{
  display:flex;gap:6px;justify-content:center;align-items:center;
  margin:6px 0 0;flex-wrap:wrap
}
.pvpd-history-label{
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);font-family:var(--mono);margin-right:4px
}
.pvpd-history-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:8px;
  background:rgba(255,26,42,.1);border:1px solid rgba(255,26,42,.35);
  font-family:var(--mono);font-size:.68rem;font-weight:800;
  color:#ff9050;animation:fadeIn .3s ease both
}
.pvpd-history-chip .r{color:rgba(255,200,150,.6);font-size:.58rem;letter-spacing:.1em;margin-right:2px}

/* Phase subheader (shows "ROUND 1 · TIED" during tiebreak) */
.pvpd-round-sub{
  display:block;font-size:.58rem;letter-spacing:.18em;
  color:var(--gray);margin-top:2px;text-transform:uppercase
}
.pvpd-round-sub.tied{color:var(--red);animation:breathe 1s ease infinite}

/* ═════════════════════════════════════════════════════════════════ */
/* PVP ROULETTE — shared revolver, alternating pulls, muzzle flash  */
/* ═════════════════════════════════════════════════════════════════ */

/* The revolver cylinder sits in the divider. Top-down view: 6 chambers
   arranged in a ring around a central hub, barrel peeking out the top. */
.pvpr-stage{
  position:relative;width:200px;height:210px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.7))
}
.pvpr-barrel{
  width:18px;height:28px;
  background:linear-gradient(180deg,#3a2820 0%,#1a1010 100%);
  border:1px solid #080404;border-radius:3px 3px 1px 1px;
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.8),inset 0 1px 1px rgba(255,255,255,.08);
  position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:4
}
.pvpr-barrel::before{
  content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,#000,#1a0808);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.9)
}

/* Cylinder body (the round 6-chamber drum) */
.pvpr-cylinder{
  position:relative;width:170px;height:170px;border-radius:50%;
  margin-top:20px;
  background:radial-gradient(circle at 30% 30%,#4a3a32 0%,#2a1d18 40%,#15100c 100%);
  border:3px solid #0c0606;
  box-shadow:
    inset 0 4px 12px rgba(255,200,140,.08),
    inset 0 -4px 12px rgba(0,0,0,.7),
    0 6px 18px rgba(0,0,0,.6)
}
/* Center hub of the revolver */
.pvpr-cylinder::after{
  content:"";position:absolute;top:50%;left:50%;
  width:34px;height:34px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 35%,#3a2820,#1a0f0a 70%,#0a0604 100%);
  border:2px solid #000;
  box-shadow:inset 0 1px 3px rgba(255,200,140,.15),inset 0 -2px 4px rgba(0,0,0,.8)
}

/* Rotating the cylinder between turns (on turn flip or empty-click advance) */
@keyframes pvprCylinderAdvance{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(60deg)}
}
.pvpr-cylinder.advancing{animation:pvprCylinderAdvance .5s cubic-bezier(.3,.8,.4,1) both}

/* Individual chamber — absolute positioned in JS around the ring */
.pvpr-chamber{
  position:absolute;width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#1a0f0a,#080404 70%,#000 100%);
  border:2px solid #0a0604;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.8),
    inset 0 -1px 2px rgba(255,200,140,.05);
  transition:all .3s
}
/* Loaded chamber shown during PRE-MATCH lobby preview (bullets picker) — a red pip */
.pvpr-chamber.loaded-preview{
  background:radial-gradient(circle at 35% 35%,#ff6030 10%,#c01020 45%,#4a0008 100%);
  box-shadow:inset 0 2px 4px rgba(255,120,80,.5),inset 0 -1px 3px rgba(0,0,0,.6),0 0 8px rgba(255,40,60,.4);
  border-color:rgba(255,60,80,.5)
}
/* Revealed empty chamber — grey and depressed */
.pvpr-chamber.revealed-empty{
  background:radial-gradient(circle at 40% 40%,#2a2018,#0f0804 70%);
  border-color:#2a1810;
  box-shadow:inset 0 3px 6px rgba(0,0,0,.9),inset 0 -1px 1px rgba(255,200,140,.04)
}
/* Revealed LOADED chamber — the fatal one. Red pulse + after-muzzle glow */
.pvpr-chamber.revealed-loaded{
  background:radial-gradient(circle at 35% 35%,#ffaa40,#ff2030 40%,#8a0010 100%);
  box-shadow:
    inset 0 2px 4px rgba(255,220,120,.6),
    inset 0 -1px 3px rgba(0,0,0,.6),
    0 0 22px rgba(255,60,40,.85),
    0 0 44px rgba(255,40,20,.5);
  border-color:rgba(255,100,60,.8);
  animation:pvprLoadedPulse .8s ease-in-out infinite alternate
}
@keyframes pvprLoadedPulse{
  from{box-shadow:inset 0 2px 4px rgba(255,220,120,.6),0 0 22px rgba(255,60,40,.85),0 0 44px rgba(255,40,20,.5)}
  to  {box-shadow:inset 0 2px 4px rgba(255,220,120,.6),0 0 36px rgba(255,100,60,.95),0 0 72px rgba(255,40,20,.7)}
}

/* "Next up" chamber — the one positioned under the barrel. Subtle breathing glow. */
.pvpr-chamber.next-up{
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.8),
    inset 0 -1px 2px rgba(255,200,140,.05),
    0 0 0 2px rgba(255,176,32,.35),
    0 0 14px rgba(255,176,32,.25);
  animation:pvprNextUp 1.6s ease-in-out infinite alternate
}
@keyframes pvprNextUp{
  from{box-shadow:inset 0 2px 4px rgba(0,0,0,.8),0 0 0 2px rgba(255,176,32,.25),0 0 10px rgba(255,176,32,.15)}
  to  {box-shadow:inset 0 2px 4px rgba(0,0,0,.8),0 0 0 2px rgba(255,176,32,.55),0 0 22px rgba(255,176,32,.45)}
}

/* Muzzle flash overlay — covers the whole arena on a fatal pull */
@keyframes pvprMuzzleFlash{
  0%{opacity:0;transform:scale(.3)}
  15%{opacity:1;transform:scale(1.1)}
  30%{opacity:.85;transform:scale(1)}
  100%{opacity:0;transform:scale(1.3)}
}
.pvpr-muzzle-flash{
  position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  width:120px;height:120px;border-radius:50%;pointer-events:none;z-index:6;
  background:radial-gradient(circle,#fff 0%,#ffe066 15%,#ff8030 40%,#c01020 65%,transparent 85%);
  filter:blur(2px);
  animation:pvprMuzzleFlash .6s cubic-bezier(.2,1.2,.4,1) both
}

/* Turn indicator overlay on the active player's panel */
.pvp-player-panel.your-turn{
  border-color:rgba(255,176,32,.75);
  background:linear-gradient(135deg,rgba(255,176,32,.18),rgba(255,176,32,.04));
  animation:pvprYourTurn 1.4s ease-in-out infinite alternate
}
@keyframes pvprYourTurn{
  from{box-shadow:0 0 0 0 rgba(255,176,32,0)}
  to  {box-shadow:0 0 0 10px rgba(255,176,32,.12)}
}

/* PULL TRIGGER button — big, red, obviously consequential */
.pvpr-pull-btn{
  background:linear-gradient(135deg,#ff2030,#8a0a14);color:#fff;
  border-radius:14px;padding:20px 0;font-weight:900;
  font-family:var(--display);font-size:1.15rem;letter-spacing:.22em;
  text-transform:uppercase;transition:all .2s;width:100%;
  box-shadow:0 6px 22px rgba(255,26,42,.42),inset 0 1px 0 rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;gap:10px;
  text-shadow:0 1px 2px rgba(0,0,0,.5)
}
.pvpr-pull-btn:active{transform:scale(.95);box-shadow:0 2px 10px rgba(255,26,42,.5)}
.pvpr-pull-btn .gun-icon{font-size:1.4rem;animation:pvprGunShake 2s ease-in-out infinite}
@keyframes pvprGunShake{
  0%,88%,100%{transform:rotate(0)}
  91%{transform:rotate(-8deg) translateY(-1px)}
  94%{transform:rotate(6deg) translateY(0)}
  97%{transform:rotate(-2deg)}
}
.pvpr-pull-btn.locked-in{animation:pvpBtnLockedIn .4s cubic-bezier(.2,1.6,.4,1) both;pointer-events:none;opacity:.5}

/* Bullets picker — shown at lobby create time */
.pvpr-bullets-picker{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:14px
}
.pvpr-bullets-btn{
  background:linear-gradient(160deg,var(--card2),var(--card));
  border:1px solid var(--border);border-radius:12px;
  padding:12px 8px;transition:all .15s;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  cursor:pointer
}
.pvpr-bullets-btn:active{transform:scale(.96)}
.pvpr-bullets-btn.selected{
  border-color:var(--red);background:linear-gradient(160deg,rgba(255,26,42,.14),rgba(255,26,42,.03));
  box-shadow:0 0 18px rgba(255,26,42,.2)
}
.pvpr-bullets-btn .chips{
  font-size:.88rem;letter-spacing:.1em
}
.pvpr-bullets-btn .count{
  font-family:var(--display);font-weight:800;font-size:.7rem;
  color:var(--red);letter-spacing:.12em
}
.pvpr-bullets-btn .odds{
  color:var(--gray);font-size:.58rem;letter-spacing:.1em;font-family:var(--mono)
}

/* Bullet chip inline in the lobby row so challengers see danger level before sitting down */
.pvpr-bullet-chip{
  display:inline-flex;align-items:center;gap:3px;
  padding:3px 7px;border-radius:8px;
  background:rgba(255,26,42,.1);border:1px solid rgba(255,26,42,.35);
  font-family:var(--mono);font-size:.6rem;font-weight:800;
  color:#ff9050;margin-left:6px
}
.pvpr-bullet-chip .pips{letter-spacing:.1em;font-size:.7rem}

/* Arena-header sub-line: shows "BULLETS: 1 · PULLS LEFT: 4" during a match */
.pvpr-match-sub{
  display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  color:var(--gray);margin-top:2px;text-transform:uppercase
}
.pvpr-match-sub b{color:#ff9050;font-weight:800}

/* Pulls history strip — shows a tiny grey dot for each empty click so far */
.pvpr-pulls-trail{
  display:flex;gap:4px;justify-content:center;align-items:center;
  margin:8px 0 0
}
.pvpr-pulls-trail-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.1);
  animation:fadeIn .3s ease both
}
.pvpr-pulls-trail-dot.by-me{background:rgba(255,176,32,.45);border-color:rgba(255,176,32,.55)}
.pvpr-pulls-trail-dot.by-opp{background:rgba(80,160,255,.4);border-color:rgba(80,160,255,.5)}

/* Turn badge replacement for roulette in .pvp-pick-badge */
.pvp-pick-badge.turn-active{
  color:var(--gold);background:rgba(255,176,32,.14);
  border-color:rgba(255,176,32,.55);
  animation:pvpThinkingDots 1.4s ease-in-out infinite
}

/* ═════════════════════════════════════════════════════════════════ */
/* PVP CRASH — shared rocket, dual cashout markers, live FOMO       */
/* ═════════════════════════════════════════════════════════════════ */

/* Reuses solo crash primitives (.cr-sky, .cr-arena, .cr-rocket, .cr-chart-line, .cr-flame).
   These overlays layer on top of the shared flight arena. */
.pvpc-arena-wrap{
  position:relative;margin-bottom:10px
}
/* The flight sky gets a PvP-tinted border to signal "shared arena" */
.pvpc-arena-wrap .cr-sky{
  border-color:rgba(232,168,32,.28);
  box-shadow:inset 0 0 60px rgba(0,0,0,.7),0 8px 28px rgba(0,0,0,.5)
}
/* Shared multiplier readout — large, center, ticks in real time */
.pvpc-mult{
  font-family:var(--display);font-weight:900;font-size:3.2rem;line-height:1;
  color:var(--cyan);letter-spacing:.04em;
  text-shadow:0 0 24px rgba(40,220,255,.5);
  transition:color .12s
}
.pvpc-mult.warn  {color:var(--gold);text-shadow:0 0 24px var(--goldgl);animation:breathe .8s ease infinite}
.pvpc-mult.danger{color:var(--red); text-shadow:0 0 28px rgba(255,26,42,.6);animation:shake .3s ease infinite}
.pvpc-mult.boom  {color:var(--red); text-shadow:0 0 34px rgba(255,26,42,.85);animation:shake .15s ease infinite}
.pvpc-mult-x{font-size:1.4rem;opacity:.7;vertical-align:top;margin-left:2px}

/* Sub-readout below mult: shows pot + who's cashed out */
.pvpc-mult-sub{
  display:flex;justify-content:center;gap:14px;margin-top:4px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--gray)
}
.pvpc-mult-sub b{color:var(--gold)}

/* Per-player live status chips — shows live mult if in flight, locked mult if cashed */
.pvpc-status-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:10px;
  font-family:var(--mono);font-weight:800;font-size:.72rem;letter-spacing:.06em;
  background:rgba(40,220,255,.1);border:1px solid rgba(40,220,255,.35);
  color:var(--cyan)
}
.pvpc-status-chip.cashed{
  background:rgba(0,232,112,.14);border-color:rgba(0,232,112,.5);color:var(--green);
  animation:pop .35s cubic-bezier(.2,1.5,.4,1) both
}
.pvpc-status-chip.crashed{
  background:rgba(255,26,42,.12);border-color:rgba(255,26,42,.45);color:var(--red);
  opacity:.7
}

/* CASH OUT NOW button — dominant, green when safe, red-glowing when mult is critical */
.pvpc-cashout-btn{
  background:linear-gradient(135deg,#00e870,#009040);color:#062211;
  border-radius:14px;padding:22px 0;font-weight:900;
  font-family:var(--display);font-size:1.3rem;letter-spacing:.18em;
  text-transform:uppercase;transition:all .15s;width:100%;
  box-shadow:0 6px 26px rgba(0,232,112,.42),inset 0 1px 0 rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;gap:12px;
  text-shadow:0 1px 1px rgba(0,0,0,.2)
}
.pvpc-cashout-btn:active{transform:scale(.96);box-shadow:0 2px 12px rgba(0,232,112,.5)}
.pvpc-cashout-btn .lockin-val{color:#06190a;background:#fff4;padding:2px 8px;border-radius:8px;font-size:.85rem}
.pvpc-cashout-btn.locked-in{
  animation:pvpBtnLockedIn .4s cubic-bezier(.2,1.6,.4,1) both;
  pointer-events:none;opacity:.55
}
/* Visual pulse when mult is rising into "risky" territory */
.pvpc-cashout-btn.hot{
  background:linear-gradient(135deg,#ffc040,#c06020);color:#2a1000;
  box-shadow:0 6px 28px rgba(255,176,32,.55),inset 0 1px 0 rgba(255,255,255,.35);
  animation:pvpcCashoutBeat .5s ease-in-out infinite alternate
}
@keyframes pvpcCashoutBeat{
  from{transform:scale(1)}
  to  {transform:scale(1.02)}
}

/* "Locked in at 2.87x" post-cashout display replacing the cashout button */
.pvpc-locked-card{
  background:linear-gradient(160deg,rgba(0,232,112,.12),rgba(0,80,32,.08));
  border:1px solid rgba(0,232,112,.45);border-radius:14px;padding:14px;
  text-align:center;animation:pop .45s cubic-bezier(.2,1.5,.4,1) both
}
.pvpc-locked-card .lbl{color:var(--green);font-family:var(--display);font-weight:800;font-size:.72rem;letter-spacing:.14em}
.pvpc-locked-card .mult{color:var(--green);font-family:var(--display);font-weight:900;font-size:1.7rem;margin-top:2px;text-shadow:0 0 14px rgba(0,232,112,.5)}
.pvpc-locked-card .payout{color:var(--gray);font-family:var(--mono);font-size:.68rem;margin-top:2px;letter-spacing:.1em}

/* Opponent-cashout ghost marker on the chart — drops in when opponent locks in */
.pvpc-opp-marker{
  position:absolute;right:10px;z-index:5;pointer-events:none;
  background:linear-gradient(135deg,rgba(0,232,112,.75),rgba(0,150,60,.75));
  color:#fff;font-family:var(--display);font-weight:900;font-size:.74rem;
  letter-spacing:.06em;padding:4px 10px;border-radius:8px;
  border:1px solid rgba(0,255,120,.65);
  box-shadow:0 0 18px rgba(0,232,112,.45),0 4px 10px rgba(0,0,0,.5);
  white-space:nowrap;
  animation:pvpcMarkerDrop .45s cubic-bezier(.2,1.4,.4,1) both
}
.pvpc-opp-marker::before{
  content:"◀";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  color:rgba(0,232,112,.75);font-size:.9rem
}
@keyframes pvpcMarkerDrop{
  0%{transform:translate(28px,-18px) scale(.6);opacity:0}
  100%{transform:translate(0,0) scale(1);opacity:1}
}

/* "OPPONENT OUT @ 2.3x" toast that drops over the arena */
.pvpc-opp-toast{
  position:absolute;top:12px;left:50%;transform:translate(-50%,-36px);
  z-index:8;padding:8px 16px;border-radius:12px;
  background:linear-gradient(135deg,rgba(0,232,112,.95),rgba(0,150,60,.95));
  color:#fff;font-family:var(--display);font-weight:900;font-size:.82rem;
  letter-spacing:.12em;white-space:nowrap;
  box-shadow:0 0 28px rgba(0,232,112,.55),0 6px 16px rgba(0,0,0,.5);
  opacity:0;
  animation:pvpcToast 2.4s ease forwards
}
@keyframes pvpcToast{
  0%  {opacity:0;transform:translate(-50%,-36px)}
  12% {opacity:1;transform:translate(-50%,6px)}
  82% {opacity:1;transform:translate(-50%,6px)}
  100%{opacity:0;transform:translate(-50%,6px)}
}

/* Shared-countdown overlay (3-2-1-LAUNCH) — anchored to flight_start server timestamp */
.pvpc-countdown{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:9;pointer-events:none;
  font-family:var(--display);font-weight:900;font-size:6rem;
  color:var(--gold);text-shadow:0 0 40px var(--goldg);
  animation:crCountdownPop 1s cubic-bezier(.3,1.2,.4,1) both
}
.pvpc-countdown.go{color:var(--red);text-shadow:0 0 40px rgba(255,26,42,.6)}

/* Explosion overlay when the rocket crashes */
.pvpc-boom{
  position:absolute;inset:0;z-index:10;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  font-size:7rem;
  animation:pvpcBoom .7s cubic-bezier(.2,1.1,.5,1) both
}
@keyframes pvpcBoom{
  0%{transform:scale(.3) rotate(-20deg);opacity:0}
  30%{transform:scale(1.3) rotate(5deg);opacity:1}
  100%{transform:scale(1.1) rotate(0);opacity:0}
}

/* Mutual-crash banner — both players lost */
.pvpc-mutual-banner{
  display:inline-block;padding:10px 18px;border-radius:12px;
  background:linear-gradient(135deg,rgba(255,176,32,.2),rgba(120,60,0,.2));
  border:1px solid rgba(255,176,32,.5);
  color:var(--gold);font-family:var(--display);font-weight:800;font-size:.88rem;
  letter-spacing:.12em;margin-top:8px;
  animation:pop .5s cubic-bezier(.2,1.5,.4,1) both
}

/* ═════════════════════════════════════════════════════════════════ */
/* PVP MINES — shared 5x5 board, alternating picks, live reveals    */
/* ═════════════════════════════════════════════════════════════════ */

/* The board itself — 5x5 grid of dark cells with dashed-gold arena styling. */
.pvpm-board-wrap{
  background:radial-gradient(ellipse at center,#0a1218 0%,#040709 70%,#020406 100%);
  border:1px solid rgba(232,168,32,.22);border-radius:18px;padding:14px;
  box-shadow:inset 0 0 40px rgba(0,0,0,.7),0 10px 30px rgba(0,0,0,.6);
  margin-bottom:12px;position:relative
}
.pvpm-board-wrap::before{
  content:"";position:absolute;inset:8px;
  border:1px dashed rgba(232,168,32,.18);border-radius:14px;pointer-events:none
}
.pvpm-board{
  display:grid;grid-template-columns:repeat(5,1fr);gap:6px;position:relative;z-index:1
}
.pvpm-cell{
  aspect-ratio:1/1;border-radius:10px;
  background:linear-gradient(160deg,#1a2230 0%,#0c1018 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.03),inset 0 -2px 4px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;cursor:pointer;transition:all .14s;
  position:relative;overflow:hidden
}
.pvpm-cell:active{transform:scale(.94)}
/* Subtle idle shimmer on pickable cells during your turn */
.pvpm-cell.pickable{
  border-color:rgba(255,176,32,.35);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.05),inset 0 -2px 4px rgba(0,0,0,.4),0 0 10px rgba(255,176,32,.18),0 2px 6px rgba(0,0,0,.5)
}
.pvpm-cell.pickable::after{
  content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;
  background:linear-gradient(135deg,transparent 40%,rgba(255,176,32,.08) 50%,transparent 60%);
  animation:pvpmShimmer 2s ease-in-out infinite
}
@keyframes pvpmShimmer{
  0%,100%{transform:translateX(-80%)}
  50%    {transform:translateX(80%)}
}
/* Can't click during opponent's turn */
.pvpm-cell.locked{cursor:not-allowed;opacity:.88}

/* Reveal state — safe cell, color-coded by who picked it */
@keyframes pvpmFlip{
  0%  {transform:rotateY(0deg) scale(1)}
  50% {transform:rotateY(90deg) scale(1.08)}
  100%{transform:rotateY(0deg) scale(1)}
}
.pvpm-cell.revealed{cursor:default;animation:pvpmFlip .42s cubic-bezier(.3,.8,.4,1) both}
.pvpm-cell.revealed.safe-me{
  background:linear-gradient(160deg,rgba(232,168,32,.35) 0%,rgba(160,110,20,.25) 100%);
  border-color:rgba(255,176,32,.55);
  box-shadow:inset 0 2px 6px rgba(255,220,120,.22),inset 0 -2px 4px rgba(0,0,0,.2),0 0 16px rgba(255,176,32,.28)
}
.pvpm-cell.revealed.safe-opp{
  background:linear-gradient(160deg,rgba(40,180,220,.35) 0%,rgba(20,80,140,.25) 100%);
  border-color:rgba(80,200,255,.5);
  box-shadow:inset 0 2px 6px rgba(160,230,255,.22),inset 0 -2px 4px rgba(0,0,0,.2),0 0 16px rgba(40,180,255,.26)
}
/* Gem icon for safe reveals */
.pvpm-cell.revealed.safe-me::before,
.pvpm-cell.revealed.safe-opp::before{
  content:"💎";filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))
}
/* Mine reveal — the fatal cell */
@keyframes pvpmMineBoom{
  0%  {transform:scale(.6) rotate(-20deg);filter:brightness(2)}
  40% {transform:scale(1.25) rotate(8deg);filter:brightness(1.4)}
  70% {transform:scale(.98) rotate(-2deg);filter:brightness(1.1)}
  100%{transform:scale(1) rotate(0);filter:brightness(1)}
}
.pvpm-cell.revealed.mine{
  background:linear-gradient(160deg,#ff2030,#8a0a14);
  border-color:rgba(255,100,60,.7);
  box-shadow:inset 0 2px 6px rgba(255,220,120,.3),0 0 28px rgba(255,40,20,.65),0 0 56px rgba(255,40,20,.35);
  animation:pvpmMineBoom .5s cubic-bezier(.2,1.2,.4,1) both
}
.pvpm-cell.revealed.mine::before{content:"💣"}
/* Post-match reveal of the OTHER mines (the ones nobody tapped) */
.pvpm-cell.revealed.mine-unpulled{
  background:linear-gradient(160deg,#3a0a12 0%,#200408 100%);
  border-color:rgba(255,100,60,.3);opacity:.65
}
.pvpm-cell.revealed.mine-unpulled::before{content:"💣";opacity:.55}
/* Post-match reveal of remaining safe cells */
.pvpm-cell.revealed.safe-unpulled{
  background:linear-gradient(160deg,#0f1a22 0%,#080c10 100%);
  border-color:rgba(255,255,255,.08);opacity:.45
}
.pvpm-cell.revealed.safe-unpulled::before{content:"";font-size:0}

/* Score chip on the player panels */
.pvpm-score-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:9px;
  font-family:var(--mono);font-weight:800;font-size:.72rem;letter-spacing:.06em;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)
}
.pvpm-score-chip.you-color{background:rgba(232,168,32,.14);border-color:rgba(232,168,32,.5);color:var(--gold)}
.pvpm-score-chip.opp-color{background:rgba(40,180,220,.12);border-color:rgba(40,180,220,.45);color:#7fcfff}
.pvpm-score-chip.cashed{animation:pop .4s cubic-bezier(.2,1.5,.4,1) both}
.pvpm-score-chip .lbl{color:var(--gray);font-weight:700;font-size:.58rem;letter-spacing:.1em;margin-right:2px}
.pvpm-score-chip .gem{font-size:.78rem}

/* CASH OUT button for mines — slightly different from crash (no live mult) */
.pvpm-cashout-btn{
  background:linear-gradient(135deg,#00e870,#009040);color:#062211;
  border-radius:14px;padding:18px 0;font-weight:900;
  font-family:var(--display);font-size:1.05rem;letter-spacing:.16em;
  text-transform:uppercase;transition:all .15s;width:100%;
  box-shadow:0 6px 22px rgba(0,232,112,.38),inset 0 1px 0 rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;gap:10px
}
.pvpm-cashout-btn:active{transform:scale(.96)}
.pvpm-cashout-btn .lockin-val{background:#fff5;padding:2px 8px;border-radius:8px;font-size:.85rem;color:#06190a}
.pvpm-cashout-btn.locked-in{animation:pvpBtnLockedIn .4s cubic-bezier(.2,1.6,.4,1) both;pointer-events:none;opacity:.55}

/* Locked card after cashout */
.pvpm-locked-card{
  background:linear-gradient(160deg,rgba(0,232,112,.12),rgba(0,80,32,.08));
  border:1px solid rgba(0,232,112,.45);border-radius:14px;padding:12px;
  text-align:center;animation:pop .45s cubic-bezier(.2,1.5,.4,1) both
}
.pvpm-locked-card .lbl{color:var(--green);font-family:var(--display);font-weight:800;font-size:.7rem;letter-spacing:.14em}
.pvpm-locked-card .count{color:var(--green);font-family:var(--display);font-weight:900;font-size:1.5rem;margin-top:2px}

/* Mines-count picker in lobby creation — mirrors roulette's bullet picker */
.pvpm-mines-picker{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:14px
}
.pvpm-mines-btn{
  background:linear-gradient(160deg,var(--card2),var(--card));
  border:1px solid var(--border);border-radius:12px;
  padding:12px 8px;transition:all .15s;
  display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer
}
.pvpm-mines-btn:active{transform:scale(.96)}
.pvpm-mines-btn.selected{
  border-color:var(--red);background:linear-gradient(160deg,rgba(255,26,42,.14),rgba(255,26,42,.03));
  box-shadow:0 0 18px rgba(255,26,42,.2)
}
.pvpm-mines-btn .count{
  font-family:var(--display);font-weight:900;font-size:1.1rem;
  color:var(--red);letter-spacing:.04em
}
.pvpm-mines-btn .lbl{color:var(--gray);font-size:.58rem;letter-spacing:.1em;font-family:var(--mono);text-transform:uppercase}
.pvpm-mines-btn .icon{font-size:1.1rem;margin-bottom:2px}

/* Mines-count chip inline in the lobby row */
.pvpm-mines-chip{
  display:inline-flex;align-items:center;gap:3px;
  padding:3px 7px;border-radius:8px;
  background:rgba(255,26,42,.1);border:1px solid rgba(255,26,42,.35);
  font-family:var(--mono);font-size:.6rem;font-weight:800;
  color:#ff9050;margin-left:6px
}

/* Plinko "pick your own risk" chip — signals the mechanic to challengers. */
.pvpp-pick-chip{
  display:inline-flex;align-items:center;gap:3px;
  padding:3px 7px;border-radius:8px;
  background:linear-gradient(135deg,rgba(0,232,112,.12),rgba(255,176,32,.1),rgba(255,40,60,.12));
  border:1px solid rgba(232,168,32,.4);
  font-family:var(--mono);font-size:.58rem;font-weight:800;letter-spacing:.06em;
  color:var(--gold);margin-left:6px
}

/* Match-header subtitle for mines (cells remaining, safe total) */
.pvpm-match-sub{
  display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  color:var(--gray);margin-top:2px;text-transform:uppercase;text-align:center
}
.pvpm-match-sub b{color:var(--gold);font-weight:800}

/* Bust-banner overlay shown on bust */
.pvpm-bust-banner{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.5);
  padding:12px 22px;border-radius:14px;z-index:8;
  background:linear-gradient(135deg,rgba(255,26,42,.96),rgba(180,20,30,.96));
  color:#fff;font-family:var(--display);font-weight:900;
  font-size:1.1rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 0 32px var(--red),0 8px 20px rgba(0,0,0,.6);
  animation:pvpBannerDrop .55s cubic-bezier(.2,1.4,.4,1) forwards
}

/* ═════════════════════════════════════════════════════════════════ */
/* PVP PLINKO — dual side-by-side boards, simultaneous drop         */
/* ═════════════════════════════════════════════════════════════════ */

/* Wraps both mini-boards. Phone-friendly: each board is ~48% width. */
.pvpp-duel{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px
}
/* Individual plinko board — dark arena box, each player's own side */
.pvpp-board{
  background:radial-gradient(ellipse at center,#0a1422 0%,#050912 70%,#020408 100%);
  border:1px solid rgba(120,160,232,.25);border-radius:14px;
  box-shadow:inset 0 0 30px rgba(0,0,0,.7),0 6px 18px rgba(0,0,0,.5);
  padding:10px 6px 6px;position:relative;overflow:hidden
}
.pvpp-board.you-side{border-color:rgba(232,168,32,.35)}
.pvpp-board.opp-side{border-color:rgba(80,180,232,.3)}
/* Dashed inner border for arena vibe */
.pvpp-board::before{
  content:"";position:absolute;inset:6px;border-radius:11px;pointer-events:none;
  border:1px dashed rgba(120,160,232,.16)
}
.pvpp-board.you-side::before{border-color:rgba(232,168,32,.18)}

/* Per-board header — name + risk badge */
.pvpp-board-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:6px;padding:0 4px;position:relative;z-index:2
}
.pvpp-board-head .nm{
  font-family:var(--display);font-weight:800;font-size:.68rem;letter-spacing:.06em;
  color:var(--white);text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%
}
.pvpp-risk-chip{
  display:inline-block;padding:2px 6px;border-radius:6px;
  font-family:var(--mono);font-weight:800;font-size:.58rem;letter-spacing:.08em;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:var(--gray)
}
.pvpp-risk-chip.low    {color:#7fe3a8;background:rgba(0,232,112,.1); border-color:rgba(0,232,112,.4)}
.pvpp-risk-chip.medium {color:#ffc070;background:rgba(255,176,32,.1);border-color:rgba(255,176,32,.4)}
.pvpp-risk-chip.high   {color:#ff7070;background:rgba(255,40,60,.1); border-color:rgba(255,40,60,.45);animation:breathe 1.2s ease infinite}
.pvpp-risk-chip.pending{color:var(--dim);animation:pvpThinkingDots 1.4s ease-in-out infinite}

/* Peg field — the actual drop area. Fixed aspect ratio so pegs sit predictably. */
.pvpp-peg-area{
  position:relative;width:100%;aspect-ratio:13/14;margin:0 auto;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 100%);
  border-radius:8px
}
/* Individual peg — small dot */
.pvpp-peg{
  position:absolute;width:4px;height:4px;border-radius:50%;
  background:radial-gradient(circle,#d0d8e8 30%,#606880 100%);
  box-shadow:0 0 3px rgba(160,200,255,.4);
  transform:translate(-50%,-50%)
}
/* The ball itself — animated via CSS keyframes driven by top/left transitions */
@keyframes pvppBallDropBounce{
  0%  {transform:translate(-50%,-50%) scale(.7);opacity:0}
  15% {transform:translate(-50%,-50%) scale(1.1);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1);opacity:1}
}
.pvpp-ball{
  position:absolute;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0%,#ffdf60 30%,#e89020 80%,#804010 100%);
  box-shadow:0 0 10px rgba(255,200,80,.7),0 2px 4px rgba(0,0,0,.4);
  transform:translate(-50%,-50%);
  transition:left .18s cubic-bezier(.4,.1,.6,1),top .18s cubic-bezier(.4,.1,.6,1);
  z-index:3;pointer-events:none
}
.pvpp-ball.opp-ball{
  background:radial-gradient(circle at 35% 30%,#fff 0%,#80d0ff 30%,#2080d0 80%,#104060 100%);
  box-shadow:0 0 10px rgba(120,200,255,.7),0 2px 4px rgba(0,0,0,.4)
}
.pvpp-ball.dropping{animation:pvppBallDropBounce .3s cubic-bezier(.2,.9,.3,1.2) both}

/* Bucket row along the bottom */
.pvpp-buckets{
  position:absolute;bottom:0;left:0;right:0;height:11%;
  display:flex;gap:1px;padding:0 2px
}
.pvpp-bucket{
  flex:1;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:900;font-size:.42rem;letter-spacing:0;
  background:linear-gradient(180deg,rgba(40,48,64,.9),rgba(20,24,36,.9));
  border:1px solid rgba(120,160,232,.18);border-radius:3px;
  color:var(--gray);position:relative;transition:all .3s;
  padding:0 1px;white-space:nowrap;overflow:hidden
}
.pvpp-bucket.landed{
  background:linear-gradient(180deg,var(--goldg),var(--gold));color:#1a0f02;
  border-color:#ffd060;box-shadow:0 0 16px var(--goldg),0 0 32px var(--goldgl);
  animation:pop .45s cubic-bezier(.2,1.5,.4,1) both;z-index:4
}
.pvpp-bucket.landed.loser-bucket{
  background:linear-gradient(180deg,rgba(255,60,80,.9),rgba(180,20,30,.9));color:#fff;
  border-color:rgba(255,100,100,.7);box-shadow:0 0 14px rgba(255,40,60,.5)
}
.pvpp-bucket.hot{color:var(--red)}
.pvpp-bucket.mid{color:var(--gray)}
.pvpp-bucket.low-mult{color:var(--dim)}

/* Risk picker — tiles the player taps to commit */
.pvpp-risk-picker{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:12px
}
.pvpp-risk-btn{
  background:linear-gradient(160deg,var(--card2),var(--card));
  border:2px solid var(--border);border-radius:14px;
  padding:14px 6px;transition:all .18s;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  position:relative;overflow:hidden
}
.pvpp-risk-btn:active{transform:scale(.96)}
.pvpp-risk-btn.sel-low{
  border-color:var(--green);
  background:linear-gradient(160deg,rgba(0,232,112,.18),rgba(0,80,30,.06));
  box-shadow:0 0 22px rgba(0,232,112,.25)
}
.pvpp-risk-btn.sel-medium{
  border-color:var(--gold);
  background:linear-gradient(160deg,rgba(255,176,32,.18),rgba(120,60,0,.06));
  box-shadow:0 0 22px var(--goldgl)
}
.pvpp-risk-btn.sel-high{
  border-color:var(--red);
  background:linear-gradient(160deg,rgba(255,40,60,.2),rgba(120,10,20,.06));
  box-shadow:0 0 22px rgba(255,40,60,.3);
  animation:breathe 1.4s ease infinite
}
.pvpp-risk-btn .rlbl{
  font-family:var(--display);font-weight:900;font-size:.78rem;letter-spacing:.1em
}
.pvpp-risk-btn .rmax{
  font-family:var(--mono);font-weight:800;font-size:1.1rem;margin-top:2px
}
.pvpp-risk-btn .rsub{
  font-family:var(--mono);font-size:.55rem;color:var(--dim);letter-spacing:.08em
}
.pvpp-risk-btn[data-risk="low"]    .rlbl{color:var(--green)}
.pvpp-risk-btn[data-risk="low"]    .rmax{color:var(--green)}
.pvpp-risk-btn[data-risk="medium"] .rlbl{color:var(--gold)}
.pvpp-risk-btn[data-risk="medium"] .rmax{color:var(--gold)}
.pvpp-risk-btn[data-risk="high"]   .rlbl{color:var(--red)}
.pvpp-risk-btn[data-risk="high"]   .rmax{color:var(--red)}
.pvpp-risk-btn.locked{cursor:default;opacity:.55;pointer-events:none}

/* DROP countdown overlay covering the dual-board area */
.pvpp-countdown{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--display);font-weight:900;font-size:6rem;
  color:var(--gold);text-shadow:0 0 40px var(--goldg);
  pointer-events:none;z-index:12;
  animation:crCountdownPop 1s cubic-bezier(.3,1.2,.4,1) both
}
.pvpp-countdown.go{color:var(--green);text-shadow:0 0 40px rgba(0,232,112,.6)}

/* "Waiting for opponent to pick" pill while you've already committed */
.pvpp-waiting-chip{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px;border-radius:12px;
  background:rgba(40,180,220,.08);border:1px solid rgba(80,180,232,.3);
  color:#7fcfff;font-family:var(--mono);font-weight:800;font-size:.78rem;letter-spacing:.1em;
  animation:breathe 1.5s ease infinite
}

/* ═════════════════════════════════════════════════════════════════ */
/* POKER — lobby + create screens (table screen lives in Turn 3)    */
/* ═════════════════════════════════════════════════════════════════ */

/* Felt-green themed header bar on poker screens. */
.pk-header{
  background:radial-gradient(ellipse at center,rgba(13,64,40,.6) 0%,rgba(7,32,21,.8) 60%,rgba(3,18,10,.9) 100%);
  border:1px solid rgba(232,168,32,.28);border-radius:16px;
  padding:14px 18px;margin-bottom:14px;position:relative;
  box-shadow:inset 0 0 30px rgba(0,0,0,.5),0 6px 20px rgba(0,0,0,.4)
}
.pk-header::before{
  content:"";position:absolute;inset:6px;border:1px dashed rgba(232,168,32,.2);
  border-radius:12px;pointer-events:none
}
.pk-header-title{
  font-family:var(--display);font-weight:900;font-size:1.1rem;letter-spacing:.12em;
  color:var(--gold);text-shadow:0 0 12px var(--goldgl)
}
.pk-header-sub{
  color:var(--gray);font-size:.72rem;font-family:var(--mono);letter-spacing:.08em;
  margin-top:2px
}

/* Lobby table card — one per open table. */
.pk-table-card{
  background:linear-gradient(160deg,var(--card2),var(--card));
  border:1px solid var(--border);border-radius:14px;
  padding:14px 16px;margin-bottom:10px;
  display:flex;align-items:center;gap:12px;
  transition:all .18s;cursor:pointer;position:relative
}
.pk-table-card:active{transform:scale(.98)}
.pk-table-card.mine{
  border-color:rgba(232,168,32,.55);
  background:linear-gradient(160deg,rgba(232,168,32,.12),rgba(120,60,0,.04));
  box-shadow:0 0 18px rgba(232,168,32,.18)
}
.pk-table-card.live{
  border-color:rgba(0,232,112,.35);
  background:linear-gradient(160deg,rgba(0,232,112,.06),var(--card))
}
.pk-table-card.full{opacity:.55;cursor:not-allowed}

.pk-table-icon{
  width:42px;height:42px;border-radius:10px;
  background:radial-gradient(circle,rgba(13,64,40,.9),rgba(3,18,10,1));
  border:1px solid rgba(232,168,32,.4);
  display:flex;align-items:center;justify-content:center;font-size:22px;
  flex-shrink:0
}
.pk-table-meta{flex:1;min-width:0}
.pk-table-meta .nm{
  font-family:var(--display);font-weight:800;font-size:.88rem;letter-spacing:.06em;
  color:var(--white)
}
.pk-table-meta .sub{
  display:block;color:var(--gray);font-size:.68rem;font-family:var(--mono);
  letter-spacing:.06em;margin-top:2px
}
.pk-stage-chip{
  display:inline-block;padding:2px 7px;border-radius:8px;
  font-family:var(--mono);font-weight:800;font-size:.56rem;letter-spacing:.08em;
  text-transform:uppercase;margin-right:6px
}
.pk-stage-chip.lobby,.pk-stage-chip.waiting{
  background:rgba(255,176,32,.1);border:1px solid rgba(255,176,32,.35);color:var(--gold)
}
.pk-stage-chip.live{
  background:rgba(0,232,112,.1);border:1px solid rgba(0,232,112,.4);color:var(--green);
  animation:breathe 1.5s ease infinite
}
.pk-seat-count{
  font-family:var(--mono);font-weight:800;font-size:.82rem;color:var(--gold);
  background:rgba(0,0,0,.35);padding:4px 10px;border-radius:9px;
  border:1px solid rgba(232,168,32,.25);flex-shrink:0
}

/* Bot-fill countdown pill inline on a lobby card */
.pk-botfill-chip{
  display:inline-block;padding:2px 6px;border-radius:6px;margin-left:4px;
  font-family:var(--mono);font-weight:700;font-size:.56rem;letter-spacing:.05em;
  background:rgba(40,180,220,.08);border:1px solid rgba(80,180,232,.28);color:#7fcfff
}

/* "No tables" empty state */
.pk-empty{
  text-align:center;padding:40px 20px;
  color:var(--dim);font-family:var(--mono);font-size:.85rem;letter-spacing:.04em
}
.pk-empty .big{font-size:48px;display:block;margin-bottom:8px;opacity:.5}

/* Resume banner for poker — reuses the PvP resume styling but with poker tinting */
.pk-resume-banner{
  background:linear-gradient(135deg,rgba(13,64,40,.5),rgba(7,32,21,.6));
  border:1px solid rgba(232,168,32,.4);border-radius:14px;
  padding:14px 16px;margin-bottom:12px;
  display:flex;align-items:center;gap:12px;cursor:pointer;
  box-shadow:0 0 24px rgba(232,168,32,.18);
  animation:breathe 2s ease infinite
}
.pk-resume-banner:active{transform:scale(.98)}

/* Create-table screen */
.pk-create-group{margin-bottom:18px}
.pk-create-label{
  color:var(--gray);font-size:.72rem;font-family:var(--mono);letter-spacing:.08em;
  margin-bottom:6px;text-transform:uppercase
}
.pk-stake-picker,.pk-seats-picker{
  display:grid;gap:8px
}
.pk-stake-picker{grid-template-columns:1fr 1fr}
.pk-seats-picker{grid-template-columns:1fr 1fr 1fr 1fr 1fr}
.pk-stake-btn,.pk-seats-btn{
  background:linear-gradient(160deg,var(--card2),var(--card));
  border:2px solid var(--border);border-radius:12px;
  padding:12px 6px;transition:all .15s;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px
}
.pk-stake-btn:active,.pk-seats-btn:active{transform:scale(.96)}
.pk-stake-btn.sel,.pk-seats-btn.sel{
  border-color:var(--gold);
  background:linear-gradient(160deg,rgba(232,168,32,.16),rgba(120,60,0,.04));
  box-shadow:0 0 16px var(--goldgl)
}
.pk-stake-btn .sb-bb{
  font-family:var(--display);font-weight:900;font-size:.88rem;color:var(--gold);
  letter-spacing:.04em
}
.pk-stake-btn .buyin-range{
  font-family:var(--mono);font-size:.58rem;color:var(--dim);letter-spacing:.06em
}
.pk-seats-btn .count{
  font-family:var(--display);font-weight:900;font-size:1rem;color:var(--gold)
}
.pk-seats-btn .lbl{
  font-family:var(--mono);font-size:.52rem;color:var(--dim);letter-spacing:.06em
}

/* Buy-in slider display */
.pk-buyin-readout{
  background:linear-gradient(160deg,rgba(13,64,40,.3),rgba(3,18,10,.5));
  border:1px solid rgba(232,168,32,.3);border-radius:12px;
  padding:12px 14px;text-align:center;margin-bottom:10px
}
.pk-buyin-readout .amt{
  font-family:var(--display);font-weight:900;font-size:1.6rem;color:var(--gold);
  text-shadow:0 0 12px var(--goldgl)
}
.pk-buyin-readout .sub{
  color:var(--gray);font-size:.68rem;font-family:var(--mono);letter-spacing:.08em;
  margin-top:2px
}
.pk-slider{
  -webkit-appearance:none;width:100%;height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--card2),var(--goldg));outline:none;
  margin-top:6px
}
.pk-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle,var(--gold),var(--goldd));cursor:pointer;
  box-shadow:0 0 10px var(--goldg),0 2px 4px rgba(0,0,0,.4)
}
.pk-slider::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle,var(--gold),var(--goldd));cursor:pointer;border:none;
  box-shadow:0 0 10px var(--goldg),0 2px 4px rgba(0,0,0,.4)
}

/* Shared flourish — subtle card-back pattern on poker screens */
.pk-card-back-tiny{
  display:inline-block;width:14px;height:18px;border-radius:2px;
  background:linear-gradient(135deg,#c01030 0%,#800818 50%,#c01030 100%);
  border:1px solid #400008;vertical-align:middle;margin:0 1px
}

/* ═════════════════════════════════════════════════════════════════ */
/* POKER TABLE — felt arena with seats around an oval               */
/* ═════════════════════════════════════════════════════════════════ */

/* The felt itself — darker green than blackjack, with a dashed-gold rim. */
.pk-felt{
  position:relative;
  background:radial-gradient(ellipse at center,#0e4a2d 0%,#072015 55%,#03120a 100%);
  border:2px solid #1a5030;border-radius:140px/80px;
  padding:20px 14px 100px;margin-bottom:12px;
  box-shadow:inset 0 0 60px rgba(0,0,0,.8),0 10px 32px rgba(0,0,0,.65);
  min-height:320px;overflow:hidden
}
.pk-felt::before{
  content:"";position:absolute;inset:8px;pointer-events:none;
  border:1px dashed rgba(232,168,32,.18);
  border-radius:134px/76px
}
/* Faint table-name watermark at the very center */
.pk-felt-watermark{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--display);font-weight:900;font-size:.54rem;
  letter-spacing:.4em;color:rgba(232,168,32,.1);pointer-events:none;
  white-space:nowrap;z-index:0
}

/* Community card row — sits centered near the top of the felt. */
.pk-community{
  position:absolute;top:42px;left:50%;transform:translateX(-50%);
  display:flex;gap:4px;z-index:3
}
.pk-comm-card{
  width:38px;height:54px;border-radius:5px;position:relative;
  transform-style:preserve-3d;flex-shrink:0;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))
}
@keyframes pkCommDeal{
  0%  {transform:translate(-80px,-60px) rotateY(180deg) rotateZ(20deg);opacity:0}
  60% {opacity:1}
  100%{transform:translate(0,0) rotateY(0) rotateZ(0);opacity:1}
}
.pk-comm-card.dealing{animation:pkCommDeal .48s cubic-bezier(.2,.9,.3,1.2) both}
.pk-comm-card.placeholder{opacity:.22}
.pk-comm-face{
  position:absolute;inset:0;border-radius:5px;
  background:linear-gradient(160deg,#fafafa,#e4e4ec);
  border:1px solid #c0c0d0;
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 4px rgba(0,0,0,.1);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:3px 4px;font-family:var(--mono);font-weight:900
}
.pk-comm-face .r{font-size:.82rem;line-height:1}
.pk-comm-face .s{font-size:1.2rem;text-align:center;margin-top:-2px}
.pk-comm-face.r{color:#d01020}
.pk-comm-face.b{color:#0a0a18}
.pk-comm-face-placeholder{
  position:absolute;inset:0;border-radius:5px;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.05),rgba(0,0,0,.3));
  border:1px dashed rgba(232,168,32,.18);
  display:flex;align-items:center;justify-content:center;
  color:rgba(232,168,32,.22);font-size:14px
}

/* Pot chip — sits above the community cards, glows gold. */
.pk-pot{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--goldg),var(--gold));
  color:#1a0f02;border:1px solid #ffd060;border-radius:16px;
  padding:3px 12px;font-family:var(--display);font-weight:900;
  font-size:.74rem;letter-spacing:.06em;z-index:4;
  box-shadow:0 0 16px var(--goldg),0 2px 6px rgba(0,0,0,.5);
  animation:breathe 2s ease infinite
}
.pk-pot .lbl{font-size:.56rem;opacity:.7;margin-right:4px;letter-spacing:.08em}

/* Stage indicator — sits below the community cards. */
.pk-stage-banner{
  position:absolute;top:106px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-weight:800;font-size:.58rem;letter-spacing:.22em;
  color:var(--gold);text-shadow:0 0 8px var(--goldg);
  background:rgba(0,0,0,.45);padding:2px 10px;border-radius:8px;
  border:1px solid rgba(232,168,32,.2);white-space:nowrap;z-index:3
}

/* Seats — absolutely positioned around the felt by index. 6-seat layout. */
.pk-seat{
  position:absolute;width:86px;text-align:center;z-index:2;
  transition:transform .15s
}
/* Per-count layouts. "You" always maps to bottom-center slot; others slotted around.
   Positions are percent-based so they scale with the felt width. */
/* 2-seat: top + bottom */
.pk-seats-2 .pk-seat-0{top:-2px;  left:50%; transform:translateX(-50%)}
.pk-seats-2 .pk-seat-1{bottom:78px; left:50%; transform:translateX(-50%)}
/* 3-seat: top, bottom-left, bottom-right */
.pk-seats-3 .pk-seat-0{top:-2px;  left:50%; transform:translateX(-50%)}
.pk-seats-3 .pk-seat-1{bottom:78px; left:18%}
.pk-seats-3 .pk-seat-2{bottom:78px; right:18%}
/* 4-seat: top, left, bottom, right */
.pk-seats-4 .pk-seat-0{top:-2px;   left:50%; transform:translateX(-50%)}
.pk-seats-4 .pk-seat-1{top:50%;    left:-8px; transform:translateY(-50%)}
.pk-seats-4 .pk-seat-2{bottom:78px;left:50%; transform:translateX(-50%)}
.pk-seats-4 .pk-seat-3{top:50%;    right:-8px; transform:translateY(-50%)}
/* 5-seat */
.pk-seats-5 .pk-seat-0{top:-2px;  left:30%; transform:translateX(-50%)}
.pk-seats-5 .pk-seat-1{top:-2px;  right:30%; transform:translateX(50%)}
.pk-seats-5 .pk-seat-2{top:46%;   left:-4px; transform:translateY(-50%)}
.pk-seats-5 .pk-seat-3{bottom:78px;left:50%; transform:translateX(-50%)}
.pk-seats-5 .pk-seat-4{top:46%;   right:-4px; transform:translateY(-50%)}
/* 6-seat (default max) */
.pk-seats-6 .pk-seat-0{top:-2px;    left:27%; transform:translateX(-50%)}
.pk-seats-6 .pk-seat-1{top:-2px;    right:27%; transform:translateX(50%)}
.pk-seats-6 .pk-seat-2{top:50%;     left:-6px; transform:translateY(-50%)}
.pk-seats-6 .pk-seat-3{bottom:74px; left:27%; transform:translateX(-50%)}
.pk-seats-6 .pk-seat-4{bottom:74px; right:27%; transform:translateX(50%)}
.pk-seats-6 .pk-seat-5{top:50%;     right:-6px; transform:translateY(-50%)}

/* Empty seat placeholder — semi-transparent with a "SIT HERE" hint on tap. */
.pk-seat.empty{
  opacity:.35;cursor:pointer
}
.pk-seat.empty:hover{opacity:.6}
.pk-seat.empty .pk-seat-avatar{
  background:rgba(0,0,0,.5);border:1px dashed rgba(232,168,32,.3);
  color:rgba(232,168,32,.4)
}

.pk-seat-avatar{
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,var(--card2),var(--card));
  border:2px solid rgba(232,168,32,.45);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-family:var(--display);font-weight:900;font-size:1.05rem;
  margin:0 auto 4px;position:relative;
  box-shadow:0 2px 8px rgba(0,0,0,.5)
}
.pk-seat-avatar.is-bot{
  background:linear-gradient(135deg,rgba(40,180,220,.2),rgba(20,80,140,.4));
  border-color:rgba(80,180,232,.45);color:#7fcfff
}
.pk-seat-avatar.is-you{
  border-color:var(--gold);border-width:3px;
  box-shadow:0 0 14px var(--goldg),0 2px 8px rgba(0,0,0,.5)
}
.pk-seat-avatar.dealer::after{
  content:"D";position:absolute;bottom:-3px;right:-3px;
  width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle,#fafafa,#d0d0dc);color:#111;
  font-family:var(--mono);font-weight:900;font-size:.62rem;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid #606080;
  box-shadow:0 2px 6px rgba(0,0,0,.7)
}

/* Folded seats fade out + desaturate. */
.pk-seat.folded{opacity:.42;filter:grayscale(.6)}
.pk-seat.sit-out{opacity:.28;filter:grayscale(1)}

/* Active-turn ring — pulsing glow around the avatar when it's their turn. */
@keyframes pkTurnPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,26,42,.55),0 2px 8px rgba(0,0,0,.5)}
  50%    {box-shadow:0 0 0 10px rgba(255,26,42,0),  0 2px 8px rgba(0,0,0,.5)}
}
.pk-seat.active .pk-seat-avatar{
  border-color:var(--red);border-width:3px;
  animation:pkTurnPulse 1.3s ease infinite
}
/* "You" + active = gold + red pulse blend */
.pk-seat.active .pk-seat-avatar.is-you{
  border-color:var(--gold)
}
/* Bot thinking — cyan soft pulse */
@keyframes pkBotThink{
  0%,100%{box-shadow:0 0 0 0 rgba(80,180,232,.4),0 2px 8px rgba(0,0,0,.5)}
  50%    {box-shadow:0 0 0 8px rgba(80,180,232,0), 0 2px 8px rgba(0,0,0,.5)}
}
.pk-seat.active .pk-seat-avatar.is-bot{
  animation:pkBotThink 1.1s ease infinite
}

/* Seat name + stack row below avatar. */
.pk-seat-name{
  color:var(--white);font-family:var(--display);font-weight:800;
  font-size:.62rem;letter-spacing:.04em;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:84px;margin:0 auto
}
.pk-seat-stack{
  color:var(--gold);font-family:var(--mono);font-weight:800;
  font-size:.58rem;letter-spacing:.04em;margin-top:1px
}
.pk-seat-stack.low{color:var(--red)}

/* Last-action bubble — small callout that flies in when an action happens. */
@keyframes pkActionBubbleIn{
  0%  {transform:scale(.3) translateY(6px);opacity:0}
  60% {transform:scale(1.1) translateY(0);opacity:1}
  100%{transform:scale(1) translateY(0);opacity:1}
}
.pk-action-bubble{
  position:absolute;top:-8px;left:50%;transform:translateX(-50%) translateY(-100%);
  background:linear-gradient(135deg,var(--gold),var(--goldd));color:#1a0f02;
  padding:2px 8px;border-radius:10px;
  font-family:var(--mono);font-weight:900;font-size:.56rem;letter-spacing:.06em;
  white-space:nowrap;
  box-shadow:0 4px 10px rgba(0,0,0,.5);
  animation:pkActionBubbleIn .35s cubic-bezier(.2,1.5,.4,1) both;
  z-index:5
}
.pk-action-bubble.fold   {background:linear-gradient(135deg,#606070,#404050);color:#fff}
.pk-action-bubble.check  {background:linear-gradient(135deg,#7fcfff,#2080d0);color:#fff}
.pk-action-bubble.call   {background:linear-gradient(135deg,#80e0a0,#30a060);color:#062211}
.pk-action-bubble.raise  {background:linear-gradient(135deg,#ffc040,#c06020);color:#2a1000}
.pk-action-bubble.allin  {background:linear-gradient(135deg,var(--red),var(--redd));color:#fff;
                           animation:pkActionBubbleIn .35s cubic-bezier(.2,1.5,.4,1) both, shake .3s ease .35s}
.pk-action-bubble.win    {background:linear-gradient(135deg,#ffd940,#c09020);color:#1a0f02;
                           box-shadow:0 0 18px var(--goldg),0 4px 10px rgba(0,0,0,.5)}

/* Per-seat current-bet chip — sits between the avatar and the center. */
.pk-bet-chip{
  position:absolute;width:36px;text-align:center;z-index:1;pointer-events:none
}
.pk-bet-chip .chip{
  display:inline-flex;align-items:center;gap:3px;
  background:linear-gradient(160deg,rgba(13,64,40,.95),rgba(3,18,10,1));
  border:1px solid rgba(232,168,32,.45);border-radius:10px;
  padding:2px 6px;
  font-family:var(--mono);font-weight:900;font-size:.56rem;color:var(--gold);
  box-shadow:0 2px 6px rgba(0,0,0,.5);
  animation:pop .3s cubic-bezier(.2,1.5,.4,1) both
}
.pk-bet-chip .chip::before{content:"🟡";font-size:.6rem}

/* Hole cards — shown inside "your" seat always; others show covered backs. */
.pk-hole{
  display:flex;gap:2px;justify-content:center;margin-top:4px;
  perspective:400px
}
.pk-hole-card{
  width:22px;height:32px;border-radius:3px;position:relative;
  transform-style:preserve-3d;flex-shrink:0;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))
}
.pk-hole-card.back{
  background:linear-gradient(135deg,#c01030 0%,#800818 50%,#c01030 100%);
  border:1px solid #400008;
  box-shadow:inset 0 0 0 2px #fff2
}
.pk-hole-card.face{
  background:linear-gradient(160deg,#fafafa,#e4e4ec);
  border:1px solid #c0c0d0;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:1px 2px
}
.pk-hole-card .r{font-family:var(--mono);font-weight:900;font-size:.64rem;line-height:1}
.pk-hole-card .s{font-size:.7rem;text-align:center;margin-top:-1px}
.pk-hole-card.face.r{color:#d01020}
.pk-hole-card.face.b{color:#0a0a18}
@keyframes pkHoleDeal{
  0%  {transform:translate(-30px,-20px) rotateZ(20deg);opacity:0}
  100%{transform:translate(0,0) rotateZ(0);opacity:1}
}
.pk-hole-card.dealing{animation:pkHoleDeal .4s cubic-bezier(.2,.9,.3,1.2) both}

/* Describe-hand label below your hole cards ("Pair of Kings"). */
.pk-hand-name{
  display:block;text-align:center;margin-top:2px;
  font-family:var(--mono);font-weight:700;font-size:.56rem;letter-spacing:.04em;
  color:var(--gold);text-shadow:0 0 6px var(--goldgl);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

/* ── Action bar — docked below the felt, always visible ── */
.pk-action-bar{
  background:linear-gradient(160deg,var(--card2),var(--card));
  border:1px solid var(--border);border-radius:14px;padding:10px;margin-bottom:10px;
  box-shadow:0 -4px 16px rgba(0,0,0,.3)
}
.pk-waiting-msg{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px;
  color:var(--gray);font-family:var(--mono);font-weight:700;font-size:.76rem;letter-spacing:.08em;
  animation:breathe 1.6s ease infinite
}
.pk-waiting-msg .turn-name{color:var(--gold)}
.pk-action-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.pk-btn-fold{
  background:linear-gradient(135deg,#606070,#404050);color:#fff;
  padding:14px 0;border-radius:12px;font-family:var(--display);font-weight:900;
  font-size:.8rem;letter-spacing:.1em;cursor:pointer;transition:all .15s;
  box-shadow:0 4px 12px rgba(0,0,0,.3)
}
.pk-btn-fold:active{transform:scale(.96)}
.pk-btn-check{
  background:linear-gradient(135deg,#7fcfff,#2080d0);color:#fff;
  padding:14px 0;border-radius:12px;font-family:var(--display);font-weight:900;
  font-size:.8rem;letter-spacing:.1em;cursor:pointer;transition:all .15s;
  box-shadow:0 4px 12px rgba(40,128,208,.35)
}
.pk-btn-check:active{transform:scale(.96)}
.pk-btn-call{
  background:linear-gradient(135deg,#00e870,#009040);color:#062211;
  padding:14px 0;border-radius:12px;font-family:var(--display);font-weight:900;
  font-size:.8rem;letter-spacing:.08em;cursor:pointer;transition:all .15s;
  box-shadow:0 4px 12px rgba(0,232,112,.35);
  display:flex;flex-direction:column;align-items:center;gap:1px
}
.pk-btn-call:active{transform:scale(.96)}
.pk-btn-call .amt{font-size:.68rem;font-weight:800;opacity:.85;letter-spacing:.04em}
.pk-btn-raise{
  background:linear-gradient(135deg,#ffc040,#c06020);color:#2a1000;
  padding:14px 0;border-radius:12px;font-family:var(--display);font-weight:900;
  font-size:.8rem;letter-spacing:.1em;cursor:pointer;transition:all .15s;
  box-shadow:0 4px 12px rgba(255,176,32,.38)
}
.pk-btn-raise:active{transform:scale(.96)}
.pk-btn-allin{
  background:linear-gradient(135deg,var(--red),var(--redd));color:#fff;
  padding:14px 0;border-radius:12px;font-family:var(--display);font-weight:900;
  font-size:.8rem;letter-spacing:.12em;cursor:pointer;transition:all .15s;
  box-shadow:0 4px 14px var(--redg);
  animation:breathe 1.8s ease infinite
}
.pk-btn-allin:active{transform:scale(.96)}

/* Raise slider panel — revealed when RAISE is tapped */
.pk-raise-panel{
  background:linear-gradient(160deg,rgba(13,64,40,.5),rgba(3,18,10,.7));
  border:1px solid rgba(232,168,32,.3);border-radius:12px;
  padding:12px 14px;margin-top:8px;
  animation:fadeIn .2s ease
}
.pk-raise-amount{
  font-family:var(--display);font-weight:900;font-size:1.4rem;color:var(--gold);
  text-align:center;text-shadow:0 0 10px var(--goldgl)
}
.pk-raise-quick{
  display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:4px;margin-top:8px
}
.pk-raise-quick button{
  background:rgba(0,0,0,.35);border:1px solid rgba(232,168,32,.28);
  color:var(--gold);font-family:var(--mono);font-weight:800;font-size:.64rem;
  padding:6px 0;border-radius:8px;cursor:pointer;letter-spacing:.04em
}
.pk-raise-quick button:active{transform:scale(.95)}
.pk-raise-confirm-row{display:flex;gap:6px;margin-top:10px}
.pk-raise-confirm-row button{flex:1}

/* Turn timer — thin bar above the action bar when it's your turn. */
.pk-turn-timer{
  height:4px;background:rgba(0,0,0,.5);border-radius:2px;overflow:hidden;
  margin-bottom:8px
}
.pk-turn-timer-fg{
  height:100%;background:linear-gradient(90deg,var(--green),var(--gold),var(--red));
  transition:width .3s linear
}
.pk-turn-timer-fg.warn{animation:breathe .6s ease infinite}

/* Action log — collapsible feed under the action bar. */
.pk-log{
  background:rgba(0,0,0,.35);border:1px solid var(--border);border-radius:10px;
  padding:6px 10px;margin-bottom:10px;
  max-height:90px;overflow-y:auto
}
.pk-log-row{
  display:flex;gap:6px;font-family:var(--mono);font-size:.64rem;
  color:var(--gray);line-height:1.4;animation:fadeIn .25s ease
}
.pk-log-row .t{color:var(--dim);flex-shrink:0}
.pk-log-row .x{flex:1;min-width:0;word-break:break-word}

/* Turn-alert banner — drops in briefly when it becomes your turn (if app was bg) */
@keyframes pkYourTurnAlert{
  0%  {transform:translate(-50%,-40px) scale(.5);opacity:0}
  15% {transform:translate(-50%,0) scale(1.05);opacity:1}
  85% {transform:translate(-50%,0) scale(1);opacity:1}
  100%{transform:translate(-50%,0) scale(1);opacity:0}
}
.pk-your-turn-alert{
  position:fixed;top:60px;left:50%;transform:translate(-50%,-40px);
  background:linear-gradient(135deg,var(--red),var(--redd));color:#fff;
  font-family:var(--display);font-weight:900;font-size:.9rem;letter-spacing:.14em;
  padding:12px 24px;border-radius:14px;
  box-shadow:0 0 32px var(--redg),0 8px 20px rgba(0,0,0,.6);
  z-index:999;pointer-events:none;
  animation:pkYourTurnAlert 2s ease forwards
}

/* Start-hand button — appears in lobby/waiting stages */
.pk-start-hand-btn{
  background:linear-gradient(135deg,var(--green),var(--greend));color:#fff;
  padding:14px 0;border-radius:12px;font-family:var(--display);font-weight:900;
  font-size:.88rem;letter-spacing:.12em;cursor:pointer;transition:all .15s;
  width:100%;box-shadow:0 4px 14px var(--greeng);
  animation:breathe 1.6s ease infinite
}
.pk-start-hand-btn:active{transform:scale(.97)}
.pk-start-hand-btn.disabled{
  background:linear-gradient(135deg,#303040,#202030);color:var(--gray);
  box-shadow:none;animation:none;cursor:not-allowed
}

/* ── SHOWDOWN REVEAL ── */

/* Hole-card flip from back to face on showdown. The card starts face-down
   (rotateY(180)) and rotates to 0. Staggered per-seat so it reads
   left-to-right around the table. */
@keyframes pkHoleFlip{
  0%  {transform:rotateY(180deg);filter:brightness(.6)}
  50% {transform:rotateY(90deg) scale(1.08);filter:brightness(1.3)}
  100%{transform:rotateY(0deg);filter:brightness(1)}
}
.pk-hole-card.revealing{animation:pkHoleFlip .55s cubic-bezier(.3,.8,.4,1) both}

/* Winner seat gets a gold glow ring during the 6s post-showdown window. */
@keyframes pkWinnerGlow{
  0%,100%{box-shadow:0 0 0 0 var(--goldg),0 2px 8px rgba(0,0,0,.5)}
  50%    {box-shadow:0 0 0 12px rgba(255,176,32,0),0 2px 8px rgba(0,0,0,.5)}
}
.pk-seat.winner .pk-seat-avatar{
  border-color:var(--gold)!important;border-width:3px;
  animation:pkWinnerGlow 1.1s ease infinite
}
.pk-seat.winner{animation:float 2.5s ease infinite;z-index:8}

/* Hand-name chip under revealed hole cards — brighter + gold-edged */
.pk-hand-name.revealed{
  color:var(--gold);background:rgba(232,168,32,.1);
  border:1px solid rgba(232,168,32,.35);border-radius:6px;
  padding:1px 6px;text-shadow:0 0 8px var(--goldg);
  animation:pop .4s cubic-bezier(.2,1.5,.4,1) both
}
.pk-hand-name.revealed.win{
  color:#fff;background:linear-gradient(135deg,var(--goldg),var(--gold));
  border-color:#ffd060
}

/* Big winner banner — drops in from above the felt, hangs for a couple seconds */
@keyframes pkWinnerBannerDrop{
  0%  {transform:translate(-50%,-80px) scale(.5);opacity:0}
  15% {transform:translate(-50%,0) scale(1.08);opacity:1}
  25% {transform:translate(-50%,0) scale(1);opacity:1}
  85% {transform:translate(-50%,0) scale(1);opacity:1}
  100%{transform:translate(-50%,-20px) scale(.95);opacity:0}
}
.pk-winner-banner{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:linear-gradient(135deg,var(--goldg),var(--gold));color:#1a0f02;
  font-family:var(--display);font-weight:900;font-size:1rem;letter-spacing:.1em;
  padding:10px 22px;border-radius:14px;z-index:9;text-align:center;
  box-shadow:0 0 32px var(--goldg),0 8px 20px rgba(0,0,0,.6);
  animation:pkWinnerBannerDrop 4s ease forwards;pointer-events:none;
  white-space:nowrap
}
.pk-winner-banner .amt{
  display:block;font-size:1.5rem;font-weight:900;letter-spacing:.04em;margin-top:2px
}
.pk-winner-banner .hand-name{
  display:block;font-size:.64rem;margin-top:4px;opacity:.8;letter-spacing:.14em
}

/* "Next hand in Xs" small countdown bubble below the felt */
.pk-next-hand-chip{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:10px;
  background:rgba(13,64,40,.4);border:1px solid rgba(232,168,32,.25);
  font-family:var(--mono);font-weight:800;font-size:.72rem;letter-spacing:.08em;
  color:var(--gold);animation:breathe 1.4s ease infinite
}

/* Bot thinking — small ghost bubble above a bot seat while they're deciding.
   Renders while action_pos === bot's actualIdx and we haven't seen their
   last_action update yet (see pkRenderSeats). */
@keyframes pkThinkingDots{
  0%,20%   {content:"."}
  40%      {content:".."}
  60%,100% {content:"..."}
}
.pk-thinking-bubble{
  position:absolute;top:-8px;left:50%;transform:translateX(-50%) translateY(-100%);
  background:rgba(40,180,220,.15);border:1px solid rgba(80,180,232,.35);
  color:#7fcfff;
  padding:2px 8px;border-radius:10px;
  font-family:var(--mono);font-weight:700;font-size:.56rem;letter-spacing:.06em;
  white-space:nowrap;z-index:5;
  animation:breathe 1s ease infinite
}

/* Winner seat gold-particles overlay — thin vertical sparkle column */
.pk-winner-sparkles{
  position:absolute;inset:-6px;pointer-events:none;overflow:hidden;border-radius:50%;
  z-index:1
}
.pk-winner-sparkles span{
  position:absolute;font-size:10px;opacity:0;
  animation:pkSparkleFloat 1.4s ease-out infinite
}
@keyframes pkSparkleFloat{
  0%  {transform:translate(var(--sx,0),20px) scale(.6);opacity:0}
  30% {opacity:1}
  100%{transform:translate(calc(var(--sx,0) * 2),-30px) scale(1.2);opacity:0}
}

/* Reconnect banner — shown after ≥2 consecutive failed polls. Fixed top, non-blocking. */
.pk-reconnect-banner{
  position:fixed;top:58px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,rgba(255,176,32,.95),rgba(200,120,30,.95));color:#1a0f02;
  font-family:var(--display);font-weight:900;font-size:.72rem;letter-spacing:.12em;
  padding:7px 16px;border-radius:12px;
  box-shadow:0 0 22px rgba(255,176,32,.4),0 4px 12px rgba(0,0,0,.4);
  z-index:998;pointer-events:none;
  animation:breathe 1.3s ease infinite
}

/* ═══ UNIFIED GAME INSTRUCTIONS STRIP ═══
   Shown on every bet screen. Collapsed by default — tap to expand.
   Matches the existing .info-box aesthetic (gold left-border, card bg). */
.game-instr{
  background:linear-gradient(135deg,var(--card),var(--surf));
  border:1px solid var(--border);
  border-left:3px solid var(--gold);
  border-radius:12px;
  margin:14px 0 6px;
  overflow:hidden;
  transition:background .2s ease;
}
.game-instr-head{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  background:none;border:none;
  color:var(--white);
  cursor:pointer;
  text-align:left;
  font-family:inherit;
}
.game-instr-head:active{background:rgba(255,255,255,.03)}
.game-instr-caret{
  color:var(--gold);
  font-size:1rem;
  transition:transform .25s ease;
  flex-shrink:0;
}
.game-instr.open .game-instr-caret{transform:rotate(180deg)}
.game-instr-body{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease,padding .3s ease;
  padding:0 14px;
  color:var(--gray);
}
.game-instr.open .game-instr-body{
  max-height:600px;
  padding:4px 14px 14px;
  border-top:1px solid var(--border);
}
.game-instr-body ol{color:var(--gray)}
.game-instr-body ol b{color:var(--white)}

/* ========== Phase 4D.1 — UX kit (toasts, modal, in-flight, fast-play) ========== */
@keyframes toastIn{from{transform:translate(-50%,-100%);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@keyframes toastOut{from{transform:translate(-50%,0);opacity:1}to{transform:translate(-50%,-100%);opacity:0}}
.toast-stack{position:fixed;top:60px;left:50%;transform:translateX(-50%);z-index:10000;display:flex;flex-direction:column;gap:8px;pointer-events:none;width:calc(100% - 32px);max-width:380px}
.toast{pointer-events:auto;background:linear-gradient(135deg,var(--card2),var(--card));border:1px solid var(--border);border-left:3px solid var(--gray);border-radius:12px;padding:12px 14px;font-size:.85rem;font-weight:600;color:var(--white);box-shadow:0 8px 24px rgba(0,0,0,.5);animation:toastIn .25s cubic-bezier(.2,.9,.3,1.2);display:flex;align-items:center;gap:10px;line-height:1.4;backdrop-filter:blur(12px)}
.toast.toast-out{animation:toastOut .25s ease forwards}
.toast.toast-error{border-left-color:var(--red);background:linear-gradient(135deg,rgba(255,26,42,.12),var(--card))}
.toast.toast-success{border-left-color:var(--green);background:linear-gradient(135deg,rgba(0,232,112,.1),var(--card))}
.toast.toast-info{border-left-color:var(--cyan);background:linear-gradient(135deg,rgba(0,212,255,.08),var(--card))}
.toast .toast-icon{font-size:1.1rem;flex-shrink:0}
.toast .toast-msg{flex:1;min-width:0;word-wrap:break-word}

.confirm-overlay{position:fixed;inset:0;z-index:10001;background:rgba(5,5,8,.86);display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s ease;backdrop-filter:blur(10px)}
.confirm-box{background:linear-gradient(160deg,var(--card2),var(--card));border:1px solid var(--border);border-radius:18px;padding:22px 20px;max-width:340px;width:100%;animation:pop .35s cubic-bezier(.3,1.5,.6,1);box-shadow:0 20px 40px rgba(0,0,0,.6)}
.confirm-icon{font-size:38px;text-align:center;margin-bottom:10px}
.confirm-title{font-family:var(--display);font-size:1rem;font-weight:800;text-align:center;color:var(--white);letter-spacing:.06em;margin-bottom:10px}
.confirm-msg{color:var(--gray);font-size:.86rem;text-align:center;line-height:1.5;margin-bottom:18px}
.confirm-actions{display:flex;gap:10px}
.confirm-actions .btn{padding:13px 0;font-size:.9rem}

.btn-inflight{position:relative;color:transparent!important;pointer-events:none}
.btn-inflight::after{content:'';position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spinW .6s linear infinite}

.fp-toggle{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,var(--card),var(--surf));border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-top:12px;cursor:pointer;transition:.2s}
.fp-toggle:active{transform:scale(.98)}
.fp-toggle.fp-on{border-color:var(--cyan);box-shadow:0 0 14px rgba(0,212,255,.18)}
.fp-toggle .fp-label{display:flex;flex-direction:column;gap:2px}
.fp-toggle .fp-label .fp-title{color:var(--white);font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:6px}
.fp-toggle .fp-label .fp-sub{color:var(--dim);font-size:.7rem;line-height:1.3}
.fp-switch{width:46px;height:26px;background:var(--border);border-radius:14px;position:relative;transition:.2s;flex-shrink:0}
.fp-switch::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;background:var(--gray);border-radius:50%;transition:.2s}
.fp-toggle.fp-on .fp-switch{background:var(--cyang)}
.fp-toggle.fp-on .fp-switch::after{left:23px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}

/* ========== Phase 4D.2 — UI polish (skeletons, page-exit, win flash, nav active) ========== */
@keyframes skelShimmer{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}
@keyframes pageExit{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-4px)}}
@keyframes winFlash{0%,100%{background:var(--bg)}30%{background:#0a2818}}
@keyframes navDot{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.25);opacity:1}}

.skel{display:block;background:linear-gradient(90deg,var(--card) 0%,var(--card2) 50%,var(--card) 100%);background-size:200px 100%;background-repeat:no-repeat;border-radius:10px;animation:skelShimmer 1.2s ease-in-out infinite;border:1px solid var(--border)}
.skel-row{height:14px;margin-bottom:10px;border-radius:6px}
.skel-row.short{width:60%}
.skel-row.medium{width:80%}
.skel-card{height:78px;margin-bottom:10px}
.skel-card.tall{height:120px}
.skel-circle{width:40px;height:40px;border-radius:50%;display:inline-block;vertical-align:middle}
.skel-stack{padding:8px 0}

.page-exit{animation:pageExit .12s ease forwards}

.win-flash{animation:winFlash .55s ease}

.nav-btn.active{position:relative}
.nav-btn.active::after{content:"";position:absolute;bottom:2px;left:50%;width:4px;height:4px;border-radius:50%;background:var(--red);transform:translateX(-50%);box-shadow:0 0 6px var(--red);animation:navDot 1.6s ease infinite}
.nav-btn.active .icon{transform:scale(1.06);transition:transform .2s ease}

/* ========== Phase 4E.1b — Stock News Events (cosmetic) ========== */
@keyframes stNewsIn {
  0%   { transform:translateX(110%); opacity:0; }
  15%  { transform:translateX(0);    opacity:1; }
  85%  { transform:translateX(0);    opacity:1; }
  100% { transform:translateX(-110%); opacity:0; }
}
.st-news-banner {
  position:absolute; left:8px; right:8px; top:6px;
  z-index:5;
  display:flex; align-items:center; gap:8px;
  padding:7px 11px;
  background:linear-gradient(90deg, rgba(20,20,28,0.96), rgba(28,28,40,0.96));
  border:1px solid var(--border);
  border-left:3px solid var(--cyan);
  border-radius:8px;
  font-family:var(--display);
  font-size:.7rem;
  letter-spacing:.08em;
  font-weight:800;
  color:var(--white);
  text-transform:uppercase;
  box-shadow:0 4px 14px rgba(0,0,0,0.5), 0 0 18px rgba(0,212,255,0.18);
  animation:stNewsIn 2.6s cubic-bezier(.22,1,.36,1) forwards;
  pointer-events:none;
}
.st-news-banner.bull { border-left-color:var(--green); box-shadow:0 4px 14px rgba(0,0,0,0.5), 0 0 18px rgba(0,232,112,0.22); }
.st-news-banner.bear { border-left-color:var(--red);   box-shadow:0 4px 14px rgba(0,0,0,0.5), 0 0 18px rgba(255,26,42,0.22); }
.st-news-banner.neut { border-left-color:var(--gold);  box-shadow:0 4px 14px rgba(0,0,0,0.5), 0 0 18px rgba(255,194,77,0.18); }
.st-news-banner .st-news-icon { font-size:.95rem; line-height:1; flex-shrink:0; }
.st-news-banner .st-news-text { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-news-banner .st-news-tag {
  flex-shrink:0;
  font-size:.55rem;
  letter-spacing:.18em;
  color:var(--dim);
  font-weight:700;
}

/* ========== Phase 4E.2 — Crash recent cashouts ticker ========== */
.cr-ticker {
  margin:8px 0 12px 0;
  background:linear-gradient(180deg, rgba(15,17,24,0.7), rgba(15,17,24,0.4));
  border:1px solid var(--border);
  border-radius:10px;
  padding:6px 0;
  overflow:hidden;
  position:relative;
}
.cr-ticker-label {
  display:flex; align-items:center; gap:6px;
  padding:0 10px 5px 10px;
  font-family:var(--display);
  font-size:.55rem;
  letter-spacing:.18em;
  color:var(--dim);
  font-weight:700;
  text-transform:uppercase;
  border-bottom:1px solid var(--border);
  margin-bottom:5px;
}
.cr-ticker-label .cr-ticker-dot {
  width:5px; height:5px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 6px var(--green);
  animation:tickerPulse 1.6s ease infinite;
}
@keyframes tickerPulse {
  0%, 100% { opacity:0.5; transform:scale(1); }
  50%      { opacity:1;   transform:scale(1.3); }
}
.cr-ticker-track {
  display:flex; gap:6px;
  padding:0 10px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.cr-ticker-track::-webkit-scrollbar { display:none; }
.cr-ticker-pill {
  flex-shrink:0;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 9px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:700;
  white-space:nowrap;
  transition:transform .15s ease;
}
.cr-ticker-pill.win {
  border-color:rgba(0,232,112,0.45);
  background:linear-gradient(135deg, rgba(0,232,112,0.08), var(--card));
}
.cr-ticker-pill.lose {
  border-color:rgba(255,26,42,0.35);
  background:linear-gradient(135deg, rgba(255,26,42,0.06), var(--card));
  opacity:0.85;
}
.cr-ticker-pill .cr-tk-handle { color:var(--gray); font-size:.62rem; font-weight:600; }
.cr-ticker-pill .cr-tk-mult   { color:var(--green); font-weight:800; }
.cr-ticker-pill.lose .cr-tk-mult { color:var(--red); }
.cr-ticker-pill .cr-tk-amount { color:var(--white); }
.cr-ticker-pill .cr-tk-time   { color:var(--dim); font-size:.55rem; font-weight:600; }
.cr-ticker-empty {
  padding:8px 12px;
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--dim);
  text-align:center;
}
.cr-ticker-window {
  font-size:.5rem;
  letter-spacing:.16em;
  color:var(--dim);
  margin-left:auto;
  font-weight:600;
}

/* ========== Phase 4E.5 — Blackjack split + double + multi-hand ========== */
.bj-hands-container {
  display:flex; flex-direction:column; gap:10px;
  margin:10px 0;
}
.bj-hand-row {
  background:radial-gradient(ellipse at center,#0d3548 0%,#061826 60%,#02101a 100%);
  border:1px solid #1a4060;
  border-radius:14px;
  padding:10px 12px;
  position:relative;
  transition:all .25s ease;
}
.bj-hand-row.active {
  border-color:var(--gold);
  box-shadow:0 0 14px rgba(255,194,77,0.35);
  background:radial-gradient(ellipse at center,#1a3a4f 0%,#082030 60%,#031420 100%);
}
.bj-hand-row.standing {
  opacity:0.55;
}
.bj-hand-row.busted {
  border-color:rgba(255,26,42,0.45);
  background:radial-gradient(ellipse at center,#3a0d18 0%,#260612 60%,#1a0210 100%);
  opacity:0.7;
}
.bj-hand-row.blackjack {
  border-color:var(--gold);
  background:radial-gradient(ellipse at center,#3a3008 0%,#262006 60%,#1a1502 100%);
  box-shadow:0 0 18px rgba(255,194,77,0.5);
}
.bj-hand-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:6px;
  font-size:.7rem;
  font-weight:700;
  color:rgba(0,184,240,0.9);
  letter-spacing:.06em;
}
.bj-hand-header .bj-hand-label {
  display:flex; align-items:center; gap:6px;
}
.bj-hand-header .bj-hand-tag {
  font-size:.55rem;
  background:rgba(255,194,77,0.18);
  color:var(--gold);
  padding:2px 6px;
  border-radius:4px;
  letter-spacing:.1em;
  font-weight:800;
}
.bj-hand-header .bj-hand-tag.split-tag {
  background:rgba(0,212,255,0.16);
  color:var(--cyan);
}
.bj-hand-header .bj-hand-tag.doubled-tag {
  background:rgba(255,138,0,0.18);
  color:var(--gold);
}
.bj-hand-header .bj-hand-bet {
  color:var(--gray); font-size:.65rem; font-weight:600;
}
.bj-hand-row .bj-row { margin-top:0; }
.bj-active-pulse {
  position:absolute; top:8px; right:10px;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 8px var(--gold);
  animation:tickerPulse 1.4s ease infinite;
}
.bj-action-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:14px;
}
.bj-action-row.with-extras {
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
}
.bj-action-row .btn {
  font-size:.85rem;
  padding:14px 0;
}
.bj-final-summary {
  margin-top:10px;
  padding:8px 12px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono);
  font-size:.78rem;
  font-weight:700;
}
.bj-final-summary .bj-outcome-win   { color:var(--green); }
.bj-final-summary .bj-outcome-lose  { color:var(--red); }
.bj-final-summary .bj-outcome-push  { color:var(--gold); }
.bj-final-summary .bj-outcome-blackjack { color:var(--gold); text-shadow:0 0 6px rgba(255,194,77,0.6); }

/* ========== Phase 4D.4 — Connection-lost banner ========== */
@keyframes connBannerIn {
  0%   { transform:translateY(-100%); opacity:0; }
  100% { transform:translateY(0);     opacity:1; }
}
@keyframes connBannerOut {
  0%   { transform:translateY(0);     opacity:1; }
  100% { transform:translateY(-100%); opacity:0; }
}
@keyframes connBannerPulse {
  0%, 100% { opacity:0.85; }
  50%      { opacity:1; }
}
#conn-banner {
  display:none;
  position:sticky;
  top:0;
  left:0; right:0;
  z-index:50;
  padding:8px 14px;
  background:linear-gradient(90deg, rgba(180,30,40,0.95), rgba(140,20,30,0.95));
  border-bottom:1px solid rgba(255,80,90,0.5);
  font-family:var(--display);
  font-size:.72rem;
  letter-spacing:.08em;
  font-weight:700;
  color:#ffe2e2;
  text-transform:uppercase;
  text-align:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.4);
  animation:connBannerIn .25s ease, connBannerPulse 2.4s ease infinite .25s;
}
#conn-banner.show { display:block; }
#conn-banner.hiding { animation:connBannerOut .25s ease forwards; }
#conn-banner .conn-icon { display:inline-block; margin-right:6px; }
#conn-banner .conn-detail {
  display:inline-block;
  margin-left:8px;
  color:rgba(255,225,225,0.75);
  font-weight:600;
  font-size:.62rem;
  letter-spacing:.06em;
}

/* Phase 4H.3 — anonymous spectator mode chrome adjustments.
   When body has .anon-spectator (set by JS at boot for /watch/{id} or
   /spectate paths), we hide the auth-gated chrome: balance button in topbar,
   bottom nav, and connection-loss banner (which polls /api/me). The topbar
   logo stays visible as a "back to fightclub" affordance. */
body.anon-spectator .bal-btn,
body.anon-spectator .bottomnav,
body.anon-spectator #conn-banner {
  display: none !important;
}
body.anon-spectator .page {
  padding-bottom: 24px; /* bottom nav is hidden, no need to reserve space */
}
body.anon-spectator .topbar-logo {
  /* Logo links to home in the authenticated app, but for anonymous viewers
     "home" doesn't exist. The onclick on the logo button still fires (which
     would call navigate('home') and 401), but for v1 we just leave it —
     anonymous users who tap the logo see an empty content area, which is
     a soft fail, not an error. 4I will route this to a "join Fight Club"
     CTA instead. */
}

/* ════════════════════════════════════════════════════════════════════
   Phase 4I — Spectator UI styles
   ════════════════════════════════════════════════════════════════════
   The Stage = the big top card with both bots, scores, and the
   game-specific round visual area. Compact mobile-first (380px wide).
   Pool rail = pari-mutuel pool sizes per side with indicative odds.
   Bet rail = compact form to place a bet (auth + staging only).
   Status banner = contextual one-liner that changes per state.
   Game canvas = swappable area where the game-specific render lives
                 between rounds. Sized to a fixed height so layout
                 doesn't jump as games change visuals. */

/* The Stage container */
.stage {
  background: linear-gradient(160deg, var(--card2), var(--card), var(--surf));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 12px;
  position: relative;
  overflow: hidden;
}
.stage-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.stage-bot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.stage-bot .name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.78rem;
  color: var(--white);
  text-align: center;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.stage-bot .elo {
  color: var(--gray);
  font-size: 0.6rem;
  font-family: var(--mono);
  letter-spacing: 0.05em;
}
.stage-bot.win-flash .name {
  animation: glowPulse 0.8s ease 2;
  color: var(--gold);
}
.stage-vs {
  color: var(--dim);
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.78rem;
}
.stage-scores {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
}
.stage-score {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.6rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.stage-score.a { color: var(--red); }
.stage-score.b { color: var(--cyan); }
.stage-score.bumped { animation: pop 0.45s cubic-bezier(.3,1.5,.6,1); }
.stage-score-sep {
  color: var(--dim);
  font-size: 0.95rem;
}
.stage-game-label {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--gold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.stage-canvas {
  background: radial-gradient(ellipse at center, rgba(0,0,0,.4), rgba(0,0,0,.15));
  border: 1px solid var(--border);
  border-radius: 10px;
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  position: relative;
  overflow: hidden;
}
.stage-canvas .canvas-empty {
  color: var(--dim);
  font-size: 0.78rem;
  font-style: italic;
}
.stage-canvas .commentary {
  position: absolute;
  bottom: 6px;
  left: 8px;
  right: 8px;
  text-align: center;
  font-size: 0.68rem;
  color: var(--gray);
  line-height: 1.2;
  pointer-events: none;
}

/* Coinflip canvas */
.spec-coin {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  font-family: var(--display);
  background: linear-gradient(135deg, var(--gold), var(--goldd));
  color: #000;
  box-shadow: 0 0 20px var(--goldg), inset 0 -4px 8px rgba(0,0,0,.3);
  animation: coinFlip3D 0.8s cubic-bezier(.4,.1,.2,1) both;
}
.spec-coin.tails {
  background: linear-gradient(135deg, #c0c0c0, #888);
  box-shadow: 0 0 20px rgba(192,192,192,.3), inset 0 -4px 8px rgba(0,0,0,.3);
}

/* Dice canvas */
.spec-dice {
  width: 64px;
  height: 64px;
  background: var(--white);
  color: #000;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 900;
  font-size: 38px;
  box-shadow: 0 6px 16px rgba(0,0,0,.5), inset 0 -4px 8px rgba(0,0,0,.1);
  animation: diceFaceIn 0.6s cubic-bezier(.2,1.4,.4,1) both;
}

/* Roulette canvas */
.spec-roul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: dropBounce 0.6s cubic-bezier(.3,1.5,.6,1) both;
}
.spec-roul .ball {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 900;
  font-size: 22px;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.5), inset 0 -3px 6px rgba(0,0,0,.4);
}
.spec-roul .ball.red    { background: linear-gradient(135deg, var(--red),    var(--redd)); }
.spec-roul .ball.black  { background: linear-gradient(135deg, #2a2a3a,        #0a0a14); border: 1px solid var(--gray); }
.spec-roul .ball.green  { background: linear-gradient(135deg, var(--green),  #00b858); color: #000; }
.spec-roul .label {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--gray);
  letter-spacing: 0.1em;
}

/* High/Low canvas */
.spec-hl {
  display: flex;
  align-items: center;
  gap: 14px;
  animation: fadeIn 0.4s ease both;
}
.spec-hl .card {
  width: 50px;
  height: 70px;
  background: var(--white);
  color: #000;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 900;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
  position: relative;
}
.spec-hl .card.shown {
  border: 2px solid var(--dim);
  opacity: 0.7;
}
.spec-hl .card.next {
  animation: bjFlip 0.55s cubic-bezier(.4,.1,.2,1) both;
}
.spec-hl .card.next.high { border: 2px solid var(--green); color: var(--green); background: #001a0a; }
.spec-hl .card.next.low  { border: 2px solid var(--red);   color: var(--red);   background: #1a0005; }
.spec-hl .arrow {
  color: var(--gold);
  font-size: 22px;
  font-weight: 900;
}

/* Blackjack canvas (simple value reveal — the game model is value-based) */
.spec-bj {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  animation: fadeIn 0.4s ease both;
}
.spec-bj .side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.spec-bj .side .val {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}
.spec-bj .side .lbl {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--gray);
  letter-spacing: 0.1em;
}
.spec-bj .side.a .val { color: var(--red); }
.spec-bj .side.b .val { color: var(--cyan); }
.spec-bj .side.win .val { animation: glowPulse 0.8s ease 2; color: var(--gold) !important; }
.spec-bj .vs { color: var(--dim); font-size: 0.85rem; font-family: var(--display); }

/* Pool rail */
.pool-rail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0 0;
}
.pool-side {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.pool-side.a {
  border-color: rgba(255,26,42,.25);
}
.pool-side.b {
  border-color: rgba(0,212,255,.25);
}
.pool-side.selected {
  box-shadow: 0 0 16px currentColor;
}
.pool-side.a.selected { border-color: var(--red);  color: var(--red); }
.pool-side.b.selected { border-color: var(--cyan); color: var(--cyan); }
.pool-side .label {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--gray);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pool-side .name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.78rem;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pool-side.a .name { color: var(--red); }
.pool-side.b .name { color: var(--cyan); }
.pool-side .pool {
  font-family: var(--mono);
  color: var(--white);
  font-weight: 700;
  font-size: 0.92rem;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.pool-side .odds {
  font-family: var(--mono);
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 700;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.pool-side .odds.dim {
  color: var(--dim);
}
.pool-flash { animation: glowPulse 0.5s ease; }

/* Status banner */
.spec-status {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid;
  font-family: var(--mono);
}
.spec-status.staging   { background: rgba(255,176,32,.06);  border-color: rgba(255,176,32,.25); color: var(--gold); }
.spec-status.live      { background: rgba(0,212,255,.06);   border-color: rgba(0,212,255,.25); color: var(--cyan); }
.spec-status.finished  { background: rgba(0,232,112,.06);   border-color: rgba(0,232,112,.25); color: var(--green); }
.spec-status.warning   { background: rgba(255,26,42,.06);   border-color: rgba(255,26,42,.25); color: var(--red); }
.spec-status .countdown {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--mono);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  min-width: 26px;
  text-align: right;
}

/* Bet rail */
.bet-rail {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin-top: 12px;
}
.bet-rail .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.bet-rail .header .title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--white);
  letter-spacing: 0.05em;
}
.bet-rail .header .balance {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--gold);
  font-weight: 700;
}
.bet-rail .side-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.bet-rail .side-buttons button {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  color: var(--gray);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  transition: .15s;
}
.bet-rail .side-buttons button:active { transform: scale(.95); }
.bet-rail .side-buttons button.a.active { border-color: var(--red);  color: var(--red);  background: rgba(255,26,42,.08); }
.bet-rail .side-buttons button.b.active { border-color: var(--cyan); color: var(--cyan); background: rgba(0,212,255,.08); }
.bet-rail .amount-input {
  width: 100%;
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
}
.bet-rail .amount-input:focus { outline: none; border-color: var(--gold); }
.bet-rail .amount-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.bet-rail .amount-presets button {
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  color: var(--gray);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.72rem;
  transition: .15s;
}
.bet-rail .amount-presets button:active { transform: scale(.92); border-color: var(--gold); color: var(--gold); }
.bet-rail .place-btn {
  width: 100%;
  margin-top: 10px;
  background: linear-gradient(135deg, var(--gold), var(--goldd));
  color: #000;
  border-radius: 12px;
  padding: 12px;
  font-family: var(--display);
  font-weight: 900;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  box-shadow: 0 4px 16px var(--goldg);
  transition: .15s;
}
.bet-rail .place-btn:active { transform: scale(.97); }
.bet-rail .place-btn:disabled,
.bet-rail .place-btn.disabled {
  opacity: 0.4;
  pointer-events: none;
  background: var(--card2);
  color: var(--gray);
  box-shadow: none;
}
.bet-rail .my-bets {
  margin-top: 10px;
  font-size: 0.7rem;
  color: var(--gray);
  font-family: var(--mono);
  text-align: center;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* Recent rounds list */
.recent-rounds {
  margin-top: 14px;
}
.recent-rounds .title {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--dim);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.recent-rounds .row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 4px;
  font-size: 0.74rem;
}
.recent-rounds .row .rn {
  font-family: var(--mono);
  font-weight: 800;
  color: var(--gold);
  min-width: 24px;
}
.recent-rounds .row .com {
  color: var(--white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-rounds .row .w {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}
.recent-rounds .row .w.a { color: var(--red); }
.recent-rounds .row .w.b { color: var(--cyan); }
.recent-rounds .row .w.tie { color: var(--gray); }

/* Settlement reveal — full-card overlay inside the page (not full-screen) */
.settle-reveal {
  margin-top: 12px;
  background: linear-gradient(160deg, var(--card2), var(--card));
  border: 1px solid var(--gold);
  border-radius: 14px;
  padding: 16px 14px;
  text-align: center;
  animation: pop 0.6s cubic-bezier(.3,1.5,.6,1);
  box-shadow: 0 0 30px var(--goldg);
}
.settle-reveal.refunded,
.settle-reveal.voided {
  border-color: var(--gray);
  box-shadow: 0 0 20px rgba(120,120,160,.2);
}
.settle-reveal .winner-line {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1rem;
  color: var(--gold);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.settle-reveal.refunded .winner-line,
.settle-reveal.voided .winner-line {
  color: var(--gray);
}
.settle-reveal .my-payout {
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  margin: 8px auto;
  max-width: 240px;
}
.settle-reveal .my-payout .label {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--gray);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.settle-reveal .my-payout .amount {
  font-family: var(--mono);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--green);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.settle-reveal .my-payout.lost .amount  { color: var(--red); }
.settle-reveal .my-payout.refund .amount { color: var(--gold); }
.settle-reveal .meta {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--dim);
  margin-top: 4px;
}

/* STEP 5 — euroulette applied */
/* ════════════════════════════════════════════════════════════════
   EUROPEAN ROULETTE — eu-* class family
   Theme: dark felt board with red/black/green pockets, gold accents.
   Uses existing CSS variables (--bg, --card, --red, --gold, --green).
   ════════════════════════════════════════════════════════════════ */

.eu-stage{background:radial-gradient(ellipse at 50% 30%,#082818 0%,#04140c 60%,#020a06 100%);border:1px solid #1a5030;border-radius:20px;padding:14px 12px 12px;position:relative;overflow:hidden;margin-bottom:12px;box-shadow:inset 0 0 50px rgba(0,0,0,.7),0 10px 30px rgba(0,0,0,.6)}
.eu-stage::before{content:"";position:absolute;inset:8px;border:1px dashed rgba(232,168,32,.15);border-radius:14px;pointer-events:none;z-index:0}
.eu-label{color:rgba(232,168,32,.85);font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:10px;text-shadow:0 0 8px rgba(255,176,32,.4);display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}
.eu-stake-pill{background:rgba(0,0,0,.5);color:var(--gold);padding:3px 10px;border-radius:10px;font-family:var(--mono);font-size:.78rem;border:1px solid rgba(232,168,32,.3)}

.eu-mode-row{display:flex;gap:4px;justify-content:space-between;margin:0 0 10px;position:relative;z-index:1}
.eu-mode{flex:1;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:6px 0;font-size:.6rem;font-weight:800;letter-spacing:.06em;color:var(--gray);font-family:var(--display);text-transform:uppercase;transition:all .15s}
.eu-mode:active{transform:scale(.93)}
.eu-mode.on{background:linear-gradient(135deg,var(--gold),var(--goldd));color:#000;border-color:var(--gold);box-shadow:0 2px 10px var(--goldg)}
.eu-mode-hint{font-size:.6rem;color:var(--dim);text-align:center;margin-bottom:6px;letter-spacing:.05em;min-height:14px;position:relative;z-index:1}

.eu-board{display:flex;gap:4px;position:relative;z-index:1;margin-bottom:8px}
.eu-zero{flex:0 0 30px;background:linear-gradient(145deg,#00b858,#007838);border:1px solid #00e870;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:900;font-family:var(--display);font-size:1.05rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);position:relative;cursor:pointer;transition:transform .12s,box-shadow .15s}
.eu-zero:active{transform:scale(.94)}
.eu-zero.has-bet{box-shadow:0 0 0 2px var(--gold) inset,0 0 14px var(--goldg)}
.eu-grid{flex:1;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(3,1fr);gap:3px;direction:ltr}
.eu-num{background:linear-gradient(145deg,#1a1a26,#10101a);border:1px solid var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:800;font-family:var(--mono);font-size:.78rem;color:#fff;cursor:pointer;transition:transform .1s,border-color .15s,box-shadow .15s;min-height:34px;position:relative;user-select:none;-webkit-user-select:none}
.eu-num.r{background:linear-gradient(145deg,#9c1424,#6c0814);border-color:#7c1018}
.eu-num.b{background:linear-gradient(145deg,#1a1a22,#08080c);border-color:#22222c}
.eu-num:active{transform:scale(.9)}
.eu-num.has-bet{box-shadow:0 0 0 2px var(--gold) inset,0 0 12px var(--goldg)}
.eu-num.preview-hl{box-shadow:0 0 0 2px var(--cyan) inset;background-image:linear-gradient(145deg,rgba(0,212,255,.25),rgba(0,212,255,.08))}
.eu-num.win-hit{animation:euWinHit 1.2s ease}
@keyframes euWinHit{0%,100%{box-shadow:0 0 0 2px var(--gold) inset,0 0 12px var(--goldg)}50%{box-shadow:0 0 0 3px var(--green) inset,0 0 24px var(--greeng)}}

.eu-num .chip,.eu-zero .chip{position:absolute;top:-4px;right:-4px;background:linear-gradient(135deg,var(--gold),var(--goldd));color:#000;font-size:.5rem;font-weight:900;font-family:var(--mono);border-radius:8px;padding:1px 4px;border:1px solid #000;min-width:14px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.5);pointer-events:none}

.eu-outside{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:5px;position:relative;z-index:1}
.eu-outside-row2{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:5px;position:relative;z-index:1}
.eu-out{background:linear-gradient(145deg,#1a1a26,#10101a);border:1px solid var(--border);border-radius:6px;padding:8px 4px;font-size:.62rem;font-weight:800;letter-spacing:.05em;color:#fff;cursor:pointer;transition:transform .1s,border-color .15s,box-shadow .15s;font-family:var(--display);text-transform:uppercase;text-align:center;position:relative}
.eu-out.red{background:linear-gradient(145deg,#9c1424,#6c0814);border-color:#7c1018}
.eu-out.black{background:linear-gradient(145deg,#1a1a22,#08080c);border-color:#22222c}
.eu-out:active{transform:scale(.95)}
.eu-out.has-bet{box-shadow:0 0 0 2px var(--gold) inset,0 0 10px var(--goldg)}

.eu-chip-row{display:flex;gap:6px;margin:10px 0 4px;position:relative;z-index:1}
.eu-chip{flex:1;background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:8px 0;font-weight:800;font-family:var(--mono);font-size:.78rem;color:var(--white);cursor:pointer;transition:all .15s}
.eu-chip:active{transform:scale(.93)}
.eu-chip.on{background:linear-gradient(135deg,var(--gold),var(--goldd));color:#000;border-color:var(--gold);box-shadow:0 2px 10px var(--goldg)}

.eu-actions{display:grid;grid-template-columns:1fr 1fr 2.4fr;gap:6px;margin-top:8px}
.eu-act-mini{background:var(--card);border:1px solid var(--dim);border-radius:10px;padding:10px 0;font-weight:800;font-size:.7rem;color:var(--gray);font-family:var(--display);letter-spacing:.06em}
.eu-act-mini:active{transform:scale(.93)}
.eu-act-mini:disabled{opacity:.35}

.eu-wheel-stage{display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px 0 8px;position:relative;z-index:1}
.eu-wheel{width:170px;height:170px;border-radius:50%;background:conic-gradient(from 0deg,#9c1424 0deg 9.7deg,#1a1a22 9.7deg 19.4deg,#9c1424 19.4deg 29.1deg,#1a1a22 29.1deg 38.8deg,#9c1424 38.8deg 48.6deg,#1a1a22 48.6deg 58.3deg,#9c1424 58.3deg 68deg,#1a1a22 68deg 77.7deg,#9c1424 77.7deg 87.4deg,#00b858 87.4deg 97.1deg,#1a1a22 97.1deg 106.8deg,#9c1424 106.8deg 116.5deg,#1a1a22 116.5deg 126.2deg,#9c1424 126.2deg 135.9deg,#1a1a22 135.9deg 145.6deg,#9c1424 145.6deg 155.3deg,#1a1a22 155.3deg 165deg,#9c1424 165deg 174.7deg,#1a1a22 174.7deg 184.4deg,#9c1424 184.4deg 194.1deg,#1a1a22 194.1deg 203.8deg,#9c1424 203.8deg 213.5deg,#1a1a22 213.5deg 223.2deg,#9c1424 223.2deg 232.9deg,#1a1a22 232.9deg 242.6deg,#9c1424 242.6deg 252.3deg,#1a1a22 252.3deg 262deg,#9c1424 262deg 271.7deg,#1a1a22 271.7deg 281.4deg,#9c1424 281.4deg 291.1deg,#1a1a22 291.1deg 300.8deg,#9c1424 300.8deg 310.5deg,#1a1a22 310.5deg 320.2deg,#9c1424 320.2deg 329.9deg,#1a1a22 329.9deg 339.6deg,#9c1424 339.6deg 349.3deg,#1a1a22 349.3deg 360deg);border:4px solid #2a1a08;box-shadow:0 0 0 2px var(--gold),0 8px 30px rgba(0,0,0,.7),inset 0 0 30px rgba(0,0,0,.4);position:relative}
.eu-wheel.spinning{animation:euWheelSpin 3s cubic-bezier(.2,.6,.2,1) both}
.eu-wheel.spinning-fast{animation:euWheelFast 1.2s linear infinite}
@keyframes euWheelSpin{from{transform:rotate(0)}to{transform:rotate(1800deg)}}
@keyframes euWheelFast{to{transform:rotate(360deg)}}
.eu-wheel-hub{position:absolute;inset:35%;background:radial-gradient(circle,#2a1a08,#0a0604);border-radius:50%;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold);font-family:var(--display);font-weight:900;font-size:.7rem;letter-spacing:.1em;text-shadow:0 0 6px var(--goldg)}
.eu-pointer{width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:14px solid var(--gold);filter:drop-shadow(0 2px 4px rgba(0,0,0,.7));margin-top:-6px;z-index:2}
.eu-result-num{font-family:var(--display);font-weight:900;font-size:2.4rem;letter-spacing:.04em;text-shadow:0 0 20px currentColor}
.eu-result-num.r{color:var(--red)}
.eu-result-num.b{color:#9090b0}
.eu-result-num.g{color:var(--green)}

.eu-history{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px 10px;margin-bottom:10px}
.eu-history-label{font-size:.6rem;font-weight:800;letter-spacing:.1em;color:var(--dim);font-family:var(--display);text-transform:uppercase;white-space:nowrap}
.eu-history-chips{flex:1;display:flex;gap:3px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.eu-history-chips::-webkit-scrollbar{display:none}
.eu-hchip{flex:0 0 22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-family:var(--mono);font-size:.6rem;color:#fff;border:1px solid rgba(0,0,0,.3)}
.eu-hchip.r{background:linear-gradient(135deg,#9c1424,#6c0814)}
.eu-hchip.b{background:linear-gradient(135deg,#1a1a22,#08080c)}
.eu-hchip.g{background:linear-gradient(135deg,#00b858,#007838)}

.eu-tickets{margin-top:8px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px;max-height:140px;overflow-y:auto}
.eu-tickets-empty{color:var(--dim);font-size:.7rem;text-align:center;padding:8px 0;font-family:var(--mono)}
.eu-ticket{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px dashed rgba(120,120,160,.1);font-size:.72rem}
.eu-ticket:last-child{border-bottom:0}
.eu-ticket-label{color:var(--white);font-weight:600;font-family:var(--mono)}
.eu-ticket-amount{color:var(--gold);font-weight:800;font-family:var(--mono)}
.eu-ticket-result{font-weight:900;font-family:var(--display);font-size:.7rem;letter-spacing:.05em;padding:2px 6px;border-radius:5px;margin-left:8px}
.eu-ticket-result.win{background:rgba(0,232,112,.15);color:var(--green)}
.eu-ticket-result.lose{background:rgba(255,26,42,.12);color:var(--red)}

/* SLOTS REDESIGN v1 — felt stage parity */
@keyframes slReelSpin{0%{transform:translateY(-12px)}100%{transform:translateY(12px)}}
@keyframes slReelStop{0%{transform:translateY(-32px);filter:blur(6px) brightness(.7)}65%{transform:translateY(6px);filter:blur(0) brightness(1.08)}82%{transform:translateY(-3px)}100%{transform:translateY(0);filter:blur(0) brightness(1)}}
@keyframes slIdleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes slHistoryIn{0%{transform:scale(.4) rotate(-12deg);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes slWinLine{0%{transform:scaleX(0);opacity:0}40%{transform:scaleX(1);opacity:1}60%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes slJackpotPulse{0%,100%{box-shadow:inset 0 0 40px rgba(0,0,0,.7),0 10px 30px rgba(0,0,0,.6),0 0 0 0 rgba(255,176,32,0)}50%{box-shadow:inset 0 0 40px rgba(0,0,0,.7),0 10px 30px rgba(0,0,0,.6),0 0 0 10px rgba(255,176,32,.18),0 0 30px rgba(255,176,32,.5)}}
@keyframes slReelWinGlow{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 6px rgba(0,0,0,.6),0 0 0 0 currentColor}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 6px rgba(0,0,0,.6),0 0 16px currentColor,0 0 4px currentColor}}
@keyframes slStreakFlash{0%{text-shadow:0 0 6px var(--goldg)}50%{text-shadow:0 0 18px var(--gold),0 0 36px var(--goldg)}100%{text-shadow:0 0 6px var(--goldg)}}

/* The casino felt table — same green felt visual language as Blackjack and
   the Coinflip override at .cf-stage, deliberately so the games feel like
   one room. Border + dashed inner frame mirrors .bj-table. */
.sl-stage{
  background:radial-gradient(ellipse at center,#0d4028 0%,#072015 60%,#03120a 100%);
  border:1px solid #1a5030;border-radius:20px;padding:22px 16px 18px;
  box-shadow:inset 0 0 40px rgba(0,0,0,.7),0 10px 30px rgba(0,0,0,.6);
  margin-bottom:14px;position:relative;overflow:hidden
}
.sl-stage::before{
  content:"";position:absolute;inset:8px;
  border:1px dashed rgba(232,168,32,.22);border-radius:16px;
  pointer-events:none;z-index:1
}
.sl-stage.jackpot{animation:slJackpotPulse 1.4s ease infinite}

.sl-table-label{
  color:rgba(232,168,32,.85);font-size:.68rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:10px;
  text-shadow:0 0 8px var(--goldg);display:flex;
  justify-content:space-between;align-items:center;position:relative;z-index:2
}
.sl-score{
  background:rgba(0,0,0,.5);color:var(--gold);padding:3px 10px;
  border-radius:10px;font-family:var(--mono);font-size:.78rem;
  border:1px solid rgba(232,168,32,.3)
}

/* The reel housing — three slots side by side under a frame, with a thin
   horizontal "win line" overlay we light up on a hit. */
.sl-reels{
  display:flex;justify-content:center;align-items:center;gap:10px;
  position:relative;z-index:2;margin:6px 0 4px;
  padding:14px 12px;border-radius:14px;
  background:linear-gradient(180deg,#03120a 0%,#02080a 100%);
  border:1px solid rgba(232,168,32,.18);
  box-shadow:inset 0 4px 12px rgba(0,0,0,.65),inset 0 -1px 0 rgba(255,255,255,.04)
}
/* SLOTS REDESIGN v2 — visibility fix */
.sl-reel{
  width:74px;height:90px;border-radius:12px;
  background:linear-gradient(180deg,#0e0e16 0%,#06060c 100%);
  border:2px solid rgba(232,168,32,.22);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;flex-shrink:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 6px rgba(0,0,0,.6);
  /* v2: color is set on a per-tier basis below (drives the win-glow
     box-shadow currentColor). DO NOT set transparent here — it
     inherits into .sl-reel-sym and on some webviews makes the emoji
     invisible. Default to gold which the symbol-element overrides. */
  color:var(--gold)
}
.sl-reel-sym{
  font-size:42px;line-height:1;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.7));
  will-change:transform,filter;
  /* v2: explicit color so we never inherit a transparent value from
     any ancestor — emoji rendering on some platforms honors `color`. */
  color:var(--white)
}
/* v2: tighter, more aggressive spin with a real blur — at 70 ms cadence
   and ±18 px amplitude it reads as continuous motion across all webview
   tick rates we tested. */
@keyframes slReelSpinV2{0%{transform:translateY(-18px);filter:blur(2px) drop-shadow(0 2px 4px rgba(0,0,0,.7))}100%{transform:translateY(18px);filter:blur(2px) drop-shadow(0 2px 4px rgba(0,0,0,.7))}}
.sl-reel.spinning .sl-reel-sym{animation:slReelSpinV2 .07s linear infinite alternate}
/* v2: stop animation starts higher up the reel but still inside the frame
   (-20 not -32) so the symbol is visible from frame 1. End-state explicitly
   clears the blur — without this the inherited filter from the spin state
   can hold for a frame on certain compositors. */
@keyframes slReelStopV2{0%{transform:translateY(-20px);filter:blur(4px) brightness(.7)}55%{transform:translateY(6px);filter:blur(0) brightness(1.08)}80%{transform:translateY(-3px);filter:blur(0) brightness(1)}100%{transform:translateY(0);filter:blur(0) brightness(1) drop-shadow(0 2px 4px rgba(0,0,0,.7))}}
.sl-reel.stopping .sl-reel-sym{animation:slReelStopV2 .42s cubic-bezier(.2,1.4,.3,1) both}
.sl-reel.win-tier-pair{color:#ffb020;animation:slReelWinGlow 1s ease infinite}
.sl-reel.win-tier-cherries{color:#ff4060;animation:slReelWinGlow 1s ease infinite}
.sl-reel.win-tier-diamond{color:#00d4ff;animation:slReelWinGlow 1s ease infinite}
.sl-reel.win-tier-jackpot{color:#ffd060;animation:slReelWinGlow .6s ease infinite}
/* end SLOTS REDESIGN v2 */

/* Idle/menu preview reels — slow float, no animations, no win frame */
.sl-reel.idle{height:74px;width:60px}
.sl-reel.idle .sl-reel-sym{font-size:34px;animation:slIdleFloat 2.4s ease-in-out infinite}
.sl-reel.idle:nth-child(2) .sl-reel-sym{animation-delay:.4s}
.sl-reel.idle:nth-child(3) .sl-reel-sym{animation-delay:.8s}

/* The horizontal win line that sweeps across when you hit. position:absolute
   inside .sl-reels — we scale it from center on a hit. */
.sl-win-line{
  position:absolute;left:8%;right:8%;top:50%;height:3px;
  background:linear-gradient(90deg,transparent,currentColor 20%,currentColor 80%,transparent);
  transform:translateY(-50%) scaleX(0);transform-origin:center;
  pointer-events:none;opacity:0;border-radius:3px;
  filter:drop-shadow(0 0 6px currentColor)
}
.sl-win-line.fire{animation:slWinLine 1.2s ease-out forwards}
.sl-win-line.tier-pair{color:#ffb020}
.sl-win-line.tier-cherries{color:#ff4060}
.sl-win-line.tier-diamond{color:#00d4ff}
.sl-win-line.tier-jackpot{color:#ffd060}

.sl-status{
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(232,168,32,.85);text-align:center;min-height:18px;
  position:relative;z-index:2;margin-top:10px
}
.sl-status.win{color:var(--green)}
.sl-status.lose{color:var(--red)}
.sl-status.jackpot{color:var(--gold);font-size:.85rem;letter-spacing:.22em}

/* Session history row — last 10 spins as tier-coloured chips */
.sl-history{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,var(--card),var(--surf));
  border:1px solid var(--border);border-radius:14px;
  padding:8px 12px;margin-bottom:10px;gap:8px
}
.sl-history-label{
  font-size:.6rem;font-weight:700;letter-spacing:.14em;color:var(--gray);
  text-transform:uppercase;white-space:nowrap
}
.sl-history-chips{
  display:flex;gap:4px;flex:1;justify-content:flex-end;overflow:hidden
}
.sl-chip{
  width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.62rem;font-weight:900;font-family:var(--mono);
  flex-shrink:0;animation:slHistoryIn .4s cubic-bezier(.3,1.4,.4,1) both;
  border:1.5px solid transparent;color:#0a0a10
}
.sl-chip.lose{background:radial-gradient(circle at 35% 35%,#404060,#1a1a26);color:#7878a0;border-color:rgba(120,120,160,.3)}
.sl-chip.pair{background:radial-gradient(circle at 35% 35%,#ffe066,#b87800);border-color:rgba(255,220,80,.5);box-shadow:0 0 6px rgba(255,176,32,.4)}
.sl-chip.cherries{background:radial-gradient(circle at 35% 35%,#ff6080,#a01030);color:#fff;border-color:rgba(255,100,128,.5);box-shadow:0 0 6px rgba(255,64,96,.4)}
.sl-chip.diamond{background:radial-gradient(circle at 35% 35%,#80e0ff,#0090c0);color:#fff;border-color:rgba(128,224,255,.5);box-shadow:0 0 6px rgba(0,212,255,.4)}
.sl-chip.jackpot{background:radial-gradient(circle at 35% 35%,#fff080,#cc8000);border-color:rgba(255,240,128,.7);box-shadow:0 0 10px rgba(255,208,96,.6);color:#3a2500;font-size:.7rem}

/* Stats strip — exact layout pattern from .cf-stats, four cards in this case */
.sl-stats{
  display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:6px;margin-bottom:12px
}
.sl-stat{
  background:rgba(0,0,0,.35);border:1px solid var(--border);
  border-radius:10px;padding:8px 4px;text-align:center
}
.sl-stat-label{
  font-size:.5rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gray);margin-bottom:2px
}
.sl-stat-val{
  font-family:var(--mono);font-weight:900;font-size:.95rem;color:var(--gold)
}
.sl-stat.streak.hot .sl-stat-val{color:var(--green);animation:slStreakFlash 1s ease-in-out infinite}

/* Paytable card — sits inside or below the felt stage, reference for what
   each combo pays. Inspired by .info-box but tighter so it fits the felt. */
.sl-paytable{
  background:rgba(0,0,0,.4);border:1px solid rgba(232,168,32,.18);
  border-radius:12px;padding:10px 12px;margin-top:10px;position:relative;z-index:2
}
.sl-paytable-title{
  font-size:.6rem;font-weight:700;letter-spacing:.14em;color:rgba(232,168,32,.85);
  text-transform:uppercase;margin-bottom:6px;text-align:center
}
.sl-paytable-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:3px 0;font-size:.8rem;border-top:1px solid rgba(255,255,255,.04)
}
.sl-paytable-row:first-of-type{border-top:none}
.sl-paytable-combo{font-family:var(--mono);letter-spacing:.04em;color:var(--white)}
.sl-paytable-mult{font-family:var(--mono);font-weight:900;color:var(--gold)}
.sl-paytable-row.tier-jackpot .sl-paytable-mult{color:#ffd060;text-shadow:0 0 6px rgba(255,208,96,.5)}
.sl-paytable-row.tier-diamond .sl-paytable-mult{color:#00d4ff}
.sl-paytable-row.tier-cherries .sl-paytable-mult{color:#ff4060}

/* Bet display strip on the ready-to-spin screen — analogous to .cf-picked-strip */
.sl-bet-strip{
  display:flex;justify-content:center;align-items:center;gap:8px;
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(232,168,32,.8);position:relative;z-index:2;margin-bottom:8px
}
.sl-bet-strip b{color:var(--white);font-family:var(--mono);font-size:.82rem}

/* The big SPIN button — gold gradient like .btn-gold but with the slot vibe */
.sl-spin-btn{
  border-radius:18px;padding:22px 0;font-weight:900;font-size:1.1rem;
  letter-spacing:.18em;font-family:var(--display);text-transform:uppercase;
  background:linear-gradient(135deg,#ffd060,#cc8a10);color:#1a1208;
  border:2px solid rgba(255,220,80,.4);width:100%;
  box-shadow:0 6px 24px rgba(255,176,32,.35),inset 0 1px 0 rgba(255,255,255,.3);
  transition:all .2s;position:relative;overflow:hidden
}
.sl-spin-btn:active{transform:scale(.94)}
.sl-spin-btn.btn-disabled{opacity:.4;pointer-events:none}

.sl-payout-preview{
  text-align:center;font-size:.72rem;color:var(--gray);
  letter-spacing:.12em;text-transform:uppercase;margin:8px 0 4px;font-weight:700
}
.sl-payout-preview b{color:var(--green);font-family:var(--mono);font-size:.9rem;margin-left:6px}
/* end SLOTS REDESIGN v1 */

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE_REBRAND_T1_THEME_APPLIED — Six Star Bet theme foundation (PHASE_REBRAND_T1_2_CASCADE_FIX_APPLIED)
   Source-order override block. Wins by CSS cascade.
   To roll back: delete from this marker comment to the closing /T1 marker.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Palette: pure-black canvas, gold primary, pink+teal accents -------- */
:root{
  /* Backgrounds — pure black canvas */
  --bg:        #000000;
  --bg2:       #080808;
  --surf:      #0d0d0d;
  --card:      #111111;
  --card2:     #151515;
  --border:    #1f1f1f;

  /* Brand gold — sheriff's badge */
  --gold:      #d4ad6e;
  --gold-light:#e7c582;
  --gold-deep: #b9935a;
  --goldg:     rgba(212,173,110,.35);
  --goldd:     #b9935a;

  /* Neon accents */
  --teal:      #4aedd4;
  --tealg:     rgba(74,237,212,.25);
  --pink-hot:  #ff69b4;
  --pinkg-hot: rgba(255,105,180,.30);

  /* Existing vars kept but recolored for new context.
     --red, --redg, --redd stay reserved for destructive actions
     (delete/withdraw/error). --green stays reserved for AI Arena terminal
     in a later pass (--greeng will narrow then). --pink is the existing
     var — we keep its value for legacy uses but Pass 2+ will migrate
     usages to --pink-hot.
     Backward-compatible: --cyan is remapped to teal so legacy
     "cyan-tagged" elements pick up the new accent automatically. */
  --cyan:      #4aedd4;
  --cyang:     rgba(74,237,212,.25);
  --purple:    #b347ff;
  --orange:    #ff6a2c;

  /* Text */
  --white:     #f8f8f8;
  --gray:      #888888;
  --dim:       #2a2a2a;
  --bhi:       #d4ad6e;   /* legacy "brand highlight" — was red, now gold */

  /* Brand gradients — named for use in box-shadow/background */
  --grad-sunset:   linear-gradient(135deg, #ff69b4, #ff6a2c, #d4ad6e);
  --grad-gold:     linear-gradient(135deg, #b9935a, #d4ad6e, #e7c582);
  --grad-neon:     linear-gradient(135deg, #ff69b4, #4aedd4);
  --grad-night:    linear-gradient(180deg, #000000 0%, #0d0d0d 50%, #000000 100%);
  --grad-wanted:   linear-gradient(135deg, #ff3333, #b347ff);
  --grad-terminal: linear-gradient(180deg, #000000, #001a00 100%);

  /* Type stack */
  --font:    'Inter', 'Oxanium', system-ui, sans-serif;
  --display: 'Anton', 'Orbitron', sans-serif;
  --mono:    'JetBrains Mono', 'Fira Code', monospace;
  --script:  'Inter', sans-serif;  /* reserved; brief allows script accent font */
}

/* --- Body bg: pure black; emoji + drop-shadow polish ------------------- */
body{ background:#000; }

/* --- Background composition: T6 — deeper vignette, WebP+JPG fallback
   PHASE_REBRAND_T6_POLISH_APPLIED
   The Vice City Ocean Drive hero image is loaded via image-set() so
   browsers pick WebP when available (much smaller) and fall back to
   the JPG for any that can't. The vignette is much deeper than T1:
   the bright sky shows only at the very top (~0-30% from top), and
   fades aggressively to near-pure-black where the UI lives.
   --------------------------------------------------------------------- */
#bg-effects{
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-color: #000;
  background-image:
    /* deep radial vignette — heavy darken from ~25% downward */
    radial-gradient(ellipse 80% 65% at 50% 18%,
       transparent 0%,
       transparent 12%,
       rgba(0,0,0,0.45) 30%,
       rgba(0,0,0,0.82) 55%,
       #000 78%),
    /* top-to-bottom: bright sky → near-black */
    linear-gradient(180deg,
       rgba(0,0,0,0.10) 0%,
       rgba(0,0,0,0.28) 18%,
       rgba(0,0,0,0.78) 32%,
       #000 55%,
       #000 100%),
    /* the actual hero image — image-set for WebP/JPG */
    image-set(
       url('/static/vice_bg_01.webp') type('image/webp'),
       url('/static/vice_bg_01.jpg')  type('image/jpeg'));
  background-size: cover, cover, cover;
  background-position: center top, center top, center top;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
/* Kill the original orbs and grid completely */
#bg-effects .bg-orb,
#bg-effects .bg-orb-1,
#bg-effects .bg-orb-2,
#bg-effects .bg-orb-3,
.bg-grid{ display:none !important; }

/* --- Topbar: gold rim-light, gold logo glow instead of red ------------- */
.topbar{
  background: rgba(0,0,0,0.78);
  border-bottom: 1px solid rgba(212,173,110,0.20);
}
.topbar-logo span:last-child{
  color: var(--gold) !important;
  font-family: var(--display) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  text-shadow:
    0 0 18px rgba(212,173,110,0.60),
    0 0 32px rgba(255,105,180,0.22) !important;
}
/* PHASE_REBRAND_T1_1_HOTFIX_APPLIED — topbar !important guard, +nav-dot recolor */
.nav-btn.active::after{
  background: var(--gold) !important;
  box-shadow: 0 0 6px var(--goldg), 0 0 10px rgba(255,105,180,.35) !important;
}
.bal-btn{
  background: linear-gradient(135deg, #111, #151515);
  border: 1px solid rgba(212,173,110,0.32);
}
.bal-btn:active{ border-color: var(--gold); }
.bal-btn .amount{
  color: var(--gold);
  font-family: var(--mono);
  text-shadow: 0 0 12px var(--goldg);
}

/* --- Bottom nav: red → gold for the active state ----------------------- */
.bottomnav{
  background: rgba(0,0,0,0.88);
  border-top: 1px solid rgba(212,173,110,0.22);
}
.nav-btn.active{
  background: linear-gradient(180deg, rgba(212,173,110,0.10), transparent);
  border-color: rgba(212,173,110,0.32);
}
.nav-btn.active .label{
  color: var(--gold);
  text-shadow: 0 0 8px rgba(212,173,110,0.55);
}

/* --- Buttons -----------------------------------------------------------
   - .btn-red is kept as the destructive button (delete/withdraw/error)
     because users have learned this convention (brief §4 accessibility).
   - .btn-gold gets a polished sunset-gradient face — the new BRAND primary.
   - New .btn-primary alias is introduced for Pass 2+ to migrate to.
   - .btn-cyan auto-skins to teal via --cyan remap above; we just need
     to bump the box-shadow color since old hardcoded #0099bb is in line 9.
   --------------------------------------------------------------------- */
.btn-gold{
  background: var(--grad-gold);
  color: #1a1408;
  box-shadow:
    0 4px 16px var(--goldg),
    0 0 0 1px rgba(231,197,130,0.30) inset;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.btn-gold:active{
  box-shadow: 0 2px 8px var(--goldg), 0 0 0 1px rgba(231,197,130,0.20) inset;
}
.btn-primary{
  border-radius: 14px;
  padding: 16px 0;
  width: 100%;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.06em;
  transition: all .2s;
  background: var(--grad-gold);
  color: #1a1408;
  box-shadow: 0 4px 18px var(--goldg), 0 0 0 1px rgba(231,197,130,0.30) inset;
  border: none;
}
.btn-primary:active{ transform: scale(.95); }

/* Tile border tint: subtle gold edge instead of dim navy */
.tile{
  border-color: rgba(212,173,110,0.16);
}
.tile:active{
  border-color: var(--gold);
  box-shadow: 0 0 22px var(--goldg), 0 4px 16px rgba(0,0,0,0.55);
}

/* Section divider line: navy → gold */
.section .line{
  background: linear-gradient(90deg, rgba(212,173,110,0.32), transparent);
}

/* Result overlay backdrop: stay pure black */
.result-overlay{ background: rgba(0,0,0,0.94); }

/* ═══════════════════════════════════════════════════════════════════════════
   /T1 — end of Pass 1 theme override block
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE_REBRAND_T6_POLISH_APPLIED — Pass 6 polish appendix
   Per-game palette retheme: red → gold/burgundy where on-brand.
   Destructive .btn-red and bomb glow KEPT (red is correct there).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tile press: red → gold */
.tile:active{
  border-color: var(--gold) !important;
  box-shadow:
    0 0 22px var(--goldg),
    0 0 36px rgba(255,105,180,.16),
    0 4px 16px rgba(0,0,0,.55) !important;
}

/* Border glow animation (used by .btn-glow): red → gold */
@keyframes borderGlow{
  0%   { border-color: var(--border); }
  50%  { border-color: var(--gold);   }
  100% { border-color: var(--border); }
}

/* Loading dots: red → gold */
.loading-dots div{
  background: var(--gold) !important;
  box-shadow: 0 0 8px var(--goldg);
}

/* Card backs: bright red → deep burgundy/wine (still feels card-table).
   Affects .bj-back, .card-hidden, and the 2 unnamed-rule .pk/.pvp
   variants that all use the same #c01030 → #800818 gradient. */
.bj-back,
.card-hidden{
  background: linear-gradient(135deg,#5a0a14 0%,#2a0008 50%,#5a0a14 100%) !important;
  border-color: #1a0004 !important;
}

/* Yellow Jack felt: slightly warmer green to lean into the noir bar look */
.bj-table{
  background: radial-gradient(ellipse at center,
    #0e3a26 0%,
    #061e12 60%,
    #020a06 100%) !important;
  border-color: #1f4830 !important;
}

/* Tile shimmer animation glow: warm up the active glow color */
.tile:active::before{
  background: linear-gradient(90deg,transparent,rgba(212,173,110,.05),transparent) !important;
}

/* /T6 */