/* Game stages — Boss 2 stage design for Boss 3 animation engines.
   Every stage reserves a real animated stage: Boss 3 mounts its engine on the
   [data-engine-mount] element. No static-card layouts ship.
   The in-game action dock is sticky ABOVE the bottom nav (never under it). */
.stage{margin-top:16px;background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);overflow:hidden}
.stage-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--card-border)}
.stage-head h2{font-size:15px}
.stage-body{padding:16px 14px}
/* --- SLOT STAGE: cabinet + reel window + strips Boss 3 animates --- */
.slot-cabinet{background:linear-gradient(180deg,#1e1e2c,#12121c);border:1px solid var(--gold-dark);border-radius:14px;padding:14px 12px}
.reel-window{position:relative;background:#08080d;border-radius:10px;padding:10px 8px;overflow:hidden}
.reel-window::before,.reel-window::after{content:"";position:absolute;left:0;right:0;height:26px;z-index:2;pointer-events:none}
.reel-window::before{top:0;background:linear-gradient(180deg,rgba(0,0,0,.75),transparent)}
.reel-window::after{bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent)}
.reels{display:flex;gap:8px}
.reel{flex:1;height:168px;overflow:hidden;border-radius:8px;background:#14141f;border:1px solid var(--card-border)}
.reel-strip{display:flex;flex-direction:column;will-change:transform}
.reel-cell{height:56px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;text-align:center;padding:2px;border-bottom:1px solid #1f1f2c}
.payline{position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(245,179,36,.0);z-index:3}
.payline.hit{background:rgba(245,179,36,.85)}
.slot-lights{display:flex;justify-content:center;gap:8px;margin-bottom:10px}
.slot-lights i{width:10px;height:10px;border-radius:999px;background:#33333f}
.slot-lights i.on{background:var(--gold)}
/* --- ROULETTE STAGE: wheel disc + betting table --- */
.roulette-layout{display:flex;flex-direction:column;gap:16px}
@media(min-width:760px){.roulette-layout{flex-direction:row}.wheel-wrap{flex:0 0 320px}}
.wheel-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.wheel-disc{position:relative;width:min(78vw,300px);aspect-ratio:1;border-radius:999px;background:radial-gradient(circle,#3a2410 0 34%,#5a3a16 35% 52%,#241708 53% 100%);border:6px solid #0a0a0f;box-shadow:0 0 0 2px var(--gold-dark),var(--shadow)}
.wheel-rotor{position:absolute;inset:6%;border-radius:999px;will-change:transform}
.wheel-pocket{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff}
.wheel-ball{position:absolute;width:14px;height:14px;border-radius:999px;background:#f5f5f5;box-shadow:0 1px 4px rgba(0,0,0,.6);left:calc(50% - 7px);top:4px;z-index:3}
.wheel-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:999px;background:#17171f;border:2px solid var(--gold-dark);display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--gold);font-size:12px;text-align:center}
.bet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;flex:1}
.bet-cell{min-height:48px;border-radius:8px;border:1px solid var(--card-border);background:#101018;color:var(--text);font-weight:800;font-size:14px}
.bet-cell.red{background:#7d1d22}.bet-cell.black{background:#15151d}.bet-cell.green{background:var(--felt)}
.bet-cell.selected{outline:2px solid var(--gold);outline-offset:-2px}
.bet-cell.wide{grid-column:span 3}
/* --- CARD TABLE STAGE: felt, shoe, dealing slots Boss 3 animates --- */
.felt-table{background:radial-gradient(ellipse at 50% 38%,var(--felt) 0,var(--felt-deep) 78%);border:1px solid #0a3a20;border-radius:120px/60px;padding:22px 14px;min-height:300px;position:relative}
.felt-label{text-align:center;color:rgba(255,255,255,.55);font-weight:800;letter-spacing:1.5px;font-size:11px;text-transform:uppercase}
.hand-row{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:16px}
.hand-label{font-size:12px;font-weight:800;color:#dff5e6;letter-spacing:.6px;text-transform:uppercase}
.hand-cards{display:flex;gap:8px;min-height:96px;align-items:center;perspective:700px}
.playing-card{width:64px;height:92px;border-radius:8px;background:#f7f7f2;color:#16161c;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:900;font-size:19px;box-shadow:0 4px 12px rgba(0,0,0,.4);will-change:transform,opacity}
.playing-card.red{color:#c2262e}
.playing-card.back{background:repeating-linear-gradient(45deg,#7d1d22 0 8px,#5f1519 8px 16px);color:transparent;border:2px solid #f7f7f2}
.card-slot{width:64px;height:92px;border-radius:8px;border:2px dashed rgba(255,255,255,.35)}
.shoe{position:absolute;top:14px;right:18px;width:44px;height:60px;border-radius:6px;background:#101018;border:1px solid var(--gold-dark);color:var(--gold);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;text-align:center}
.hand-total{font-weight:900;background:rgba(0,0,0,.45);border-radius:999px;padding:2px 12px;color:#fff;font-size:13px}
/* --- DICE STAGE: roll track + target slider --- */
.dice-track{height:120px;border-radius:12px;background:#08080d;border:1px solid var(--card-border);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:14px}
.die{width:72px;height:72px;border-radius:14px;background:#f7f7f2;color:#16161c;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900;box-shadow:0 6px 16px rgba(0,0,0,.5);will-change:transform}
.dice-controls{margin-top:14px}
input[type="range"]{width:100%;accent-color:var(--gold);height:44px}
.dice-readout{display:flex;justify-content:space-between;font-weight:800;font-variant-numeric:tabular-nums}
/* --- ACTION DOCK: sticky above bottom nav --- */
.action-dock{position:sticky;bottom:calc(var(--bottomnav-h) + env(safe-area-inset-bottom));z-index:30;background:var(--panel);border:1px solid var(--card-border);border-radius:var(--radius);padding:12px;margin-top:16px;box-shadow:var(--shadow)}
@media(min-width:1024px){.action-dock{bottom:16px}}
.bet-row{display:flex;gap:10px;align-items:stretch}
.bet-amount{flex:1;display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius-sm);padding:6px 12px}
.bet-amount input{width:100%;background:none;border:0;color:var(--text);font-size:17px;font-weight:800;outline:none;font-variant-numeric:tabular-nums}
.stepper{display:flex;gap:6px}
.stepper button{width:48px;min-height:48px;border-radius:var(--radius-sm);border:1px solid var(--card-border);background:var(--card2);color:var(--text);font-size:18px;font-weight:900}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{min-width:52px;min-height:44px;border-radius:999px;border:2px dashed var(--gold-dark);background:var(--card);color:var(--gold-soft);font-weight:900;padding:6px 10px}
.chip.selected{background:var(--gold);color:var(--on-gold);border-style:solid}