/* Coinflip */
/* ---------- Coinflip ---------- */
.cf-stage{flex-direction:column;gap:40px;overflow:hidden}
.cf-wrap{position:relative;display:flex;justify-content:center}
.coin-scene{width:220px;height:220px;perspective:1000px;position:relative;z-index:1;isolation:isolate}
.cf-wrap .popup{z-index:5}
.coin-toss{width:100%;height:100%}
.coin-toss.tossing{animation:toss 1s cubic-bezier(.3,0,.3,1)}
@keyframes toss{0%{transform:translateY(0) scale(1)}45%{transform:translateY(-80px) scale(1.12)}100%{transform:translateY(0) scale(1)}}
.coin-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.25,.9,.35,1)}
.face{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;align-items:center;justify-content:center;transition:filter .3s}
.face svg{width:55%;height:55%}
.face.heads{background:radial-gradient(circle at 35% 30%,#ffe08a,#f5a524 55%,#c77d06);box-shadow:inset 0 0 0 10px #e39412,inset 0 0 0 15px #ffc64d,0 12px 30px rgba(0,0,0,.45)}
.face.tails{transform:rotateY(180deg);background:radial-gradient(circle at 35% 30%,#9cc4ff,#1475e1 55%,#0b4ea3);box-shadow:inset 0 0 0 10px #0f63c4,inset 0 0 0 15px #5d9ff0,0 12px 30px rgba(0,0,0,.45)}
.coin-scene.win .face{filter:drop-shadow(0 0 22px rgba(0,231,1,.7))}
.coin-scene.lose .face{filter:drop-shadow(0 0 22px rgba(237,65,99,.8)) saturate(.6)}
.picks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pickbtn{background:var(--tile);padding:14px 10px;border-radius:4px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,transform .05s}
.pickbtn:hover:not(:disabled){background:var(--tile-hover)}
.pickbtn:active:not(:disabled){transform:scale(.97)}
.pickbtn:disabled{opacity:.5}
.picks.three{grid-template-columns:repeat(3,1fr)}
.picks.three .pickbtn{padding:12px 6px;gap:6px}
.pickbtn.on{background:var(--tile-hover);box-shadow:inset 0 0 0 2px var(--green)}
.mini{width:18px;height:18px;border-radius:50%;flex:none}
.mini.heads,.slot .dot.heads{background:radial-gradient(circle at 35% 30%,#ffe08a,#f5a524 60%,#c77d06)}
.mini.tails,.slot .dot.tails{background:radial-gradient(circle at 35% 30%,#9cc4ff,#1475e1 60%,#0b4ea3)}
.ladder{position:relative;display:flex;gap:10px;overflow-x:auto;width:100%;max-width:640px;padding:6px 6px 10px;scrollbar-width:none}
.ladder::-webkit-scrollbar{display:none}
.slot{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:60px}
.slot .dot{width:42px;height:42px;border-radius:50%;background:var(--tile);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25);transition:box-shadow .2s}
.slot .dot.heads,.slot .dot.tails{animation:pop .35s cubic-bezier(.34,1.7,.5,1)}
.slot .dot.lost{box-shadow:0 0 0 3px var(--red);opacity:.8}
.slot.next .dot{box-shadow:0 0 0 2px var(--tile-hover)}
.slot small{color:var(--muted);font-weight:700;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.slot.done small{color:var(--green)}