/* ============ Balloon Pump game ============ */
.balloon { display: flex; flex-direction: column; min-height: 0; min-width: 0; flex: 1; overflow-x: clip; }

/* ---- Stage ---- */
.bp-stage {
  position: relative; margin: 12px 14px 0; border-radius: var(--r);
  border: 1px solid var(--line); overflow: hidden;
  background:
    radial-gradient(120% 64% at 50% -12%, rgba(240,185,11,.07), transparent 60%),
    linear-gradient(180deg, #122231 0%, #0e1a25 58%, #0b141c 100%);
  min-height: clamp(296px, 40vh, 404px);
  display: flex; flex-direction: column;
}

/* top overlay: in-play amount (left) + status (right) */
.bp-topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; pointer-events: none; }
.bp-potential { background: rgba(0,0,0,.32); border: 1px solid var(--line); padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--muted); backdrop-filter: blur(3px); }
.bp-potential b { color: var(--win); font-variant-numeric: tabular-nums; font-weight: 700; }
.bp-status { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
.bp-status.win { color: var(--win); }
.bp-status.lose { color: var(--lose); }

/* scene fills the stage; the pump base is anchored to the bottom */
.bp-scene { position: relative; flex: 1; min-height: 0; overflow: hidden; }

/* ---- Pump machine ---- */
.bp-pump { position: absolute; left: 0; right: 0; bottom: 0; height: 118px; z-index: 2; pointer-events: none; }
.bp-floor { position: absolute; left: -3%; right: -3%; bottom: 0; height: 32px; background: linear-gradient(180deg, #243340, #19232e); }
.bp-console { position: absolute; left: 5%; bottom: 0; width: min(248px, 49%); height: 72px; background: linear-gradient(180deg, #27333f, #1a2530); border-radius: 40px 40px 0 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.bp-dots { position: absolute; top: 17px; left: 27px; display: flex; gap: 11px; }
.bp-dots i { width: 8px; height: 8px; border-radius: 50%; background: #33414d; transition: background .2s ease, box-shadow .2s ease; }
.bp-dots i.lit { background: var(--win); box-shadow: 0 0 9px rgba(14,203,129,.75); }
.bp-dots i.hot { background: #ff5470; box-shadow: 0 0 9px rgba(255,84,112,.85); }
.bp-nozzle { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 66px; height: 54px; background: linear-gradient(180deg, #2b3845, #1d2832); border-radius: 13px 13px 0 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.bp-nozzle::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: -18px; width: 30px; height: 24px; background: linear-gradient(180deg, #33414f, #23303b); border-radius: 7px 7px 0 0; }

/* ---- Balloon (anchored at the nozzle, inflates upward) ---- */
.bp-anchor { position: absolute; left: 0; right: 0; bottom: 74px; z-index: 3; display: flex; justify-content: center; align-items: flex-end; pointer-events: none; }
.bp-balloon { width: clamp(148px, 44vw, 206px); transform-origin: 50% 100%; transform: scale(.16); transition: transform .1s linear; will-change: transform; }
.bp-balloon.popped { opacity: 0; transform: scale(1.22) !important; transition: opacity .16s ease, transform .16s ease; }
.bp-balloon-inner { transform-origin: 50% 100%; will-change: transform, filter; }
.bp-balloon-inner.inflating { animation: bp-sway 2.8s ease-in-out infinite; }
.bp-balloon-inner.inflating.danger { animation: bp-tense .34s ease-in-out infinite; filter: drop-shadow(0 0 16px rgba(255,70,70,.55)); }
.bp-balloon-inner.secured { animation: bp-secured .9s ease forwards; filter: drop-shadow(0 0 22px rgba(14,203,129,.7)); }
.bp-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 22px rgba(0,0,0,.4)); }

@keyframes bp-sway  { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes bp-tense { 0%, 100% { transform: rotate(0) scale(1); } 25% { transform: rotate(1.2deg) scale(1.012,.988); } 75% { transform: rotate(-1.2deg) scale(.988,1.012); } }
@keyframes bp-secured { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-60px) scale(1.05); opacity: 0; } }

/* multiplier — HTML overlay; JS keeps it centred inside the balloon and scales the font to fit */
.bp-mult { position: absolute; transform: translate(-50%, -50%); z-index: 4; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -1px; line-height: 1; text-shadow: 0 3px 12px rgba(0,0,0,.5); white-space: nowrap; opacity: 0; transition: opacity .2s ease, color .15s ease; pointer-events: none; }
.bp-mult.show { opacity: 1; }
.bp-mult.win  { color: #eafff4; }
.bp-mult.lose { color: #fff; }

/* burst shards (JS positions the origin at the balloon centre on pop) */
.bp-burst { position: absolute; width: 0; height: 0; z-index: 6; pointer-events: none; }
.bp-shard { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 2px; background: var(--c, #ff5470); opacity: 0; }
.bp-burst.go .bp-shard { animation: bp-shard .6s ease-out forwards; }
@keyframes bp-shard {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.4); }
}

@keyframes bp-shake { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-6px, 3px); } 40% { transform: translate(6px, -3px); } 60% { transform: translate(-4px, -2px); } 80% { transform: translate(4px, 2px); } }
.bp-stage.shake { animation: bp-shake .4s ease; }

.bp-stage .history-strip { border-top: 1px solid var(--line); position: relative; z-index: 5; background: rgba(0,0,0,.18); }
.bp-pill.win  { border-color: rgba(14,203,129,.45); color: var(--win); }
.bp-pill.lose { border-color: rgba(246,70,93,.42); color: var(--lose); }

/* ---- Controls ---- */
.bp-controls {
  margin: 12px 14px calc(14px + env(safe-area-inset-bottom)); padding: 14px;
  background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--r);
  display: flex; flex-direction: column; gap: 12px;
}
.bp-sens-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }
.bp-sens-hint { font-size: 10px; letter-spacing: .3px; text-transform: none; opacity: .8; }
.bp-sens { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bp-sens-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px; border-radius: var(--r-sm);
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
  transition: background .15s, color .15s, border-color .15s, transform .08s ease;
}
.bp-sens-btn:active { transform: scale(.96); }
.bp-sens-btn b { font-size: 16px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.bp-sens-btn small { font-size: 9px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.bp-sens-btn.active { background: rgba(240,185,11,.14); border-color: rgba(240,185,11,.5); color: var(--accent); }
.bp-sens-btn.active b { color: var(--accent); }
.bp-sens-btn:disabled { opacity: .5; }

.bp-auto { border-top: 1px solid var(--line); padding-top: 10px; }

.balloon .launch-btn {
  background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #1a1300;
  box-shadow: 0 6px 18px rgba(240,185,11,.3);
  transition: transform .07s ease, filter .15s ease, box-shadow .25s ease;
}
.balloon .launch-btn:not(:disabled) { animation: bp-glow 2.3s ease-in-out infinite; }
@keyframes bp-glow { 0%, 100% { box-shadow: 0 6px 18px rgba(240,185,11,.28); } 50% { box-shadow: 0 8px 28px rgba(240,185,11,.5); } }
.balloon .launch-btn.cashout {
  background: linear-gradient(180deg, #16d98e, #07b977); color: #04130d;
  box-shadow: 0 6px 18px rgba(14,203,129,.32); animation: none;
}
.balloon .launch-btn.waiting { background: var(--panel-2); color: var(--muted); box-shadow: none; animation: none; }
.balloon .launch-btn:active { transform: scale(.985); }

/* ---- Mobile: native bottom tab bar (Games / Play / My plays) ---- */
@media (max-width: 879px) {
  .balloon { padding-bottom: 74px; }
  .balloon .mybets { display: none; }
  .balloon.view-plays .mybets { display: block; min-height: 60vh; }
  .balloon.view-plays .bp-stage,
  .balloon.view-plays .bp-controls { display: none; }
}