*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#000;overflow:hidden}
body{display:flex;align-items:flex-start;justify-content:center}
.gw{
  width:100%;max-width:480px;height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  background:var(--bb-deep);
  font-family:'Baloo 2',system-ui,sans-serif;
  overflow:hidden;position:relative;
}
/* header */
.hbar{
  flex:0 0 auto;background:var(--bb-plum);
  border-bottom:1px solid rgba(255,255,255,0.06);
  display:flex;align-items:center;justify-content:space-between;padding:6px 10px;
}
.hbar-logo{font-weight:800;font-style:italic;font-size:16px;letter-spacing:-.01em;line-height:1}
.hbar-bal{
  display:flex;align-items:center;background:rgba(0,0,0,0.24);
  border-radius:20px;padding:3px 12px;
  font-weight:800;font-size:13.5px;color:#fff;
}
.hbar-bal span{font-size:12px;font-weight:700;color:rgba(255,255,255,0.55);margin-left:3px}
/* stage */
.stage{
  flex:1;min-height:0;position:relative;overflow:hidden;
  display:flex;flex-direction:column;background:var(--bb-stage);
}
.halftone-corner{
  position:absolute;width:150px;height:150px;pointer-events:none;
  background-size:9px 9px;
  -webkit-mask-image:radial-gradient(closest-side,#000 35%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 35%,transparent 100%);
}
.halftone-tr{
  top:-10px;right:-10px;opacity:.5;
  background-image:radial-gradient(#B6FF27 1.6px,transparent 1.7px);
}
.halftone-bl{
  bottom:-10px;left:-10px;opacity:.4;
  background-image:radial-gradient(var(--bb-kit2) 1.6px,transparent 1.7px);
}
.pitch-stripes{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(180deg,var(--bb-stripe) 0 26px,transparent 26px 52px);
  -webkit-mask-image:linear-gradient(180deg,transparent 18%,#000 55%);
  mask-image:linear-gradient(180deg,transparent 18%,#000 55%);
}
.stage-inner{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
/* title area */
.title-area{flex:0 0 auto;text-align:center;padding-top:6px}
.outcome-row{
  height:30px;display:flex;align-items:center;justify-content:center;padding:0 12px;
}
.outcome-pill{
  font-weight:800;font-size:13px;letter-spacing:.02em;color:var(--bb-acid);
}
/* ── Result card — persistent until PLACE BET is clicked ─────────────
   Shown for a voluntary cash-out or becoming Champion (borrowed from
   bbfightnight/bbgunslinger's own result-card pattern) — sits over the
   goal scene and stays up until the player's next action, rather than
   auto-dismissing on a timer. Created/removed entirely by JS
   (showResultCard/hideResultCard in game.js) — never present in the
   initial markup. */
/* Spans the full .gw (not just the scene), so it must stay pointer-events:
   none — otherwise it would sit visually on top of PLACE BET and every
   other control below the stage and swallow their clicks, even though
   those live in separate sibling elements underneath it. */
.result-card-overlay{
  position:absolute;inset:0;z-index:150;
  display:flex;align-items:center;justify-content:center;
  padding:16px;pointer-events:none;
  opacity:0;transition:opacity .25s;
}
.result-card-overlay--active{opacity:1}
.result-card{
  background:rgba(12,6,30,0.9);
  border:2px solid var(--bb-acid);
  border-radius:16px;
  padding:18px 28px;
  text-align:center;
  min-width:200px;
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
  animation:result-card-pop .4s cubic-bezier(.34,1.56,.64,1) both;
}
.result-card--champ{
  border-color:var(--bb-accent);
  background:rgba(20,14,0,0.94);
  box-shadow:0 0 40px rgba(255,224,0,0.45),0 8px 24px rgba(0,0,0,0.5);
}
.result-card-headline{
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:24px;
  color:var(--bb-acid);letter-spacing:.03em;
}
.result-card--champ .result-card-headline{
  color:var(--bb-accent);
  text-shadow:0 0 16px rgba(255,224,0,0.6);
}
.result-card-sub{
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:12px;
  color:rgba(255,255,255,0.6);letter-spacing:.06em;margin-top:4px;
}
.result-card-divider{
  height:1px;background:rgba(255,255,255,0.12);margin:12px 0;
}
.result-card-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:12px;
  color:rgba(255,255,255,0.6);letter-spacing:.04em;
}
.result-card-payout{
  font-size:18px;font-weight:800;color:#fff;
}
@keyframes result-card-pop{
  0%   { transform:scale(0.6) translateY(16px); opacity:0; }
  60%  { transform:scale(1.05); opacity:1; }
  100% { transform:scale(1); opacity:1; }
}
/* scene */
.scene-center{
  flex:1;min-height:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:8px 16px 10px;
}
.goal-wrap{position:relative;width:100%}
.goal-front-layer{position:absolute;top:0;left:0;right:0;z-index:25;pointer-events:none}
.keeper-wrap{
  /* Bottom-anchored so the keeper's feet sit exactly on the goal base
     line (89% = post base, y=178 of the 0-200 goal viewBox), rather than
     the whole sprite being vertically centered on that line. Fixed
     center — no per-shot positioning (that was the old keeper-position
     mechanic). z-index sits above .goal-front-layer (posts) — the keeper
     must always read as standing in front of the goal, even mid-dive when
     his head/arms reach up near the crossbar. */
  position:absolute;left:50%;top:89%;
  transform:translate(-50%,-100%);
  transform-origin:center bottom;transition:none;
  z-index:30;
}
/* pointer-events:none is required, not cosmetic — this ball lands (and
   stays, invisible at opacity:0) right at wherever a target's own anchor
   point is, and its z-index sits above .target-layer's. Without this, the
   stale landed ball silently blocks every future click on that same
   target until a differently-positioned shot happens to move it. */
.ball-absolute{position:absolute;z-index:20;pointer-events:none}
/* arc */
.arc-wrap{
  position:relative;margin-top:2px;
  display:flex;flex-direction:column;align-items:center;
}
.arc-svg{position:absolute;top:-2px;left:50%;transform:translateX(-50%);z-index:0}
.spot{width:7px;height:7px;border-radius:5px;background:#fff;opacity:.85;margin-bottom:2px}
.spot-ball{position:relative;z-index:1}
/* shoot button — one wide button, no left/right choice here */
.shoot-row{
  flex:0 0 auto;display:flex;gap:8px;
  padding:9px 10px;background:var(--bb-deep);
}
.shoot-btn{
  flex:1;position:relative;border:none;cursor:pointer;border-radius:13px;
  padding:7px 0 8px;font-family:'Baloo 2',sans-serif;
  font-weight:800;font-size:16px;letter-spacing:.04em;
  overflow:hidden;background:var(--bb-kit2);color:#fff;
  box-shadow:0 4px 0 #000,0 6px 14px rgba(0,0,0,0.35);
  display:flex;align-items:center;justify-content:center;
  touch-action:manipulation;
}
.shoot-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,0.28),rgba(255,255,255,0) 45%);
}
.shoot-btn:active:not(:disabled){transform:translateY(2px)}
/* Brief error state (insufficient funds, invalid stake, connection error) —
   flashes the bet/cashout button itself rather than a separate message
   element, since there's no outcome pill anymore. */
.shoot-btn--error{background:#FF4040!important}
/* bet bar */
.bet-bar{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  background:#1A0636;padding:8px 12px;
  border-top:1px solid rgba(255,255,255,0.06);
}
.bet-label{font-weight:700;font-size:12px;color:rgba(255,255,255,0.6);letter-spacing:.04em}
.stake-ctrl{
  display:flex;align-items:center;
  background:rgba(255,255,255,0.07);border-radius:9px;overflow:hidden;
}
.step-btn{
  width:34px;height:30px;border:none;background:transparent;
  color:#fff;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:18px;
  cursor:pointer;line-height:1;
}
.step-btn.plus{color:var(--bb-acid)}
.stake-input{
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:14px;color:#fff;
  padding:0 6px;width:60px;text-align:center;
  background:transparent;border:none;outline:none;
  -webkit-appearance:none;-moz-appearance:textfield;
}
.stake-input::-webkit-outer-spin-button,
.stake-input::-webkit-inner-spin-button{-webkit-appearance:none}
.spacer{flex:1}
.icon-btn{
  width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,0.07);color:rgba(255,255,255,0.7);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  text-decoration:none;
}
/* ── Quick-stakes row ────────────────────────────────── */
/* Padding/background live on the slot wrapper (shared by both the
   quick-stakes row and the cash-out button), not on either child — a
   width:100% child plus its own horizontal margin is what overflowed the
   screen before; this way the child just fills the wrapper's padded box. */
.quick-stakes-slot{
  flex:0 0 auto;
  padding:6px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  background:#1A0636;
  border-top:1px solid rgba(255,255,255,0.06);
}
.quick-stakes-row{
  display:flex;gap:6px;
}
.quick-stake-btn{
  flex:1;background:var(--bb-acid);
  border:2px solid rgba(0,0,0,0.35);border-radius:8px;
  box-shadow:2px 2px 0 rgba(0,0,0,0.4);
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:13px;
  color:var(--bb-deep);letter-spacing:.01em;
  padding:8px 4px;cursor:pointer;text-align:center;
  transition:transform .1s,box-shadow .1s,background .1s;
}
.quick-stake-btn:hover:not(:disabled){transform:translate(1px,1px);box-shadow:1px 1px 0 rgba(0,0,0,0.4)}
.quick-stake-btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:0 0 0 rgba(0,0,0,0.4)}
.quick-stake-btn--active{background:var(--bb-accent)!important}
.quick-stake-btn:disabled{opacity:.35;cursor:not-allowed}
/* Cash-out button — sits in the same slot as .quick-stakes-row (same
   background/padding), swapped in once a round is active. Single line by
   design: "CASH OUT" + amount + currency, no separate stacked spans. */
.cashout-btn{
  display:block;width:100%;
  background:var(--bb-acid);color:var(--bb-deep);
  border:2px solid rgba(0,0,0,0.35);border-radius:8px;
  box-shadow:2px 2px 0 rgba(0,0,0,0.4);
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:15px;letter-spacing:.02em;
  padding:10px 4px;cursor:pointer;text-align:center;white-space:nowrap;
  transition:transform .1s,box-shadow .1s;
}
.cashout-btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:0 0 0 rgba(0,0,0,0.4)}
.cashout-btn:disabled{opacity:.4;cursor:not-allowed}
/* ── Difficulty selector ─────────────────────────────── */
.level-row{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:6px 14px;background:var(--bb-deep);
  border-top:1px solid rgba(255,255,255,0.06);
}
.level-label{
  font-size:13px;font-weight:700;letter-spacing:.08em;
  color:rgba(255,255,255,0.45);text-transform:uppercase;
}
.difficulty-btns{flex:1;display:flex;gap:8px;max-width:280px}
.diff-btn{
  flex:1;background:var(--bb-kit2);color:rgba(255,255,255,0.75);
  border:2px solid rgba(0,0,0,0.4);border-radius:9px;
  box-shadow:0 3px 0 #000;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:12px;letter-spacing:.03em;
  padding:5px 4px;cursor:pointer;text-align:center;
  transition:transform .1s,box-shadow .1s,background .1s,color .1s;
}
.diff-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #000}
.diff-btn--active{background:var(--bb-accent);color:var(--bb-deep)}
.diff-btn:disabled{opacity:.4;cursor:not-allowed}

/* ── Round / multiplier track ────────────────────────────────── */
.round-track{
  display:flex;gap:3px;justify-content:center;flex-wrap:nowrap;
  padding:4px 10px 2px;overflow-x:auto;
}
.round-cell{
  flex:0 0 auto;min-width:30px;display:flex;flex-direction:column;align-items:center;
  gap:1px;padding:3px 2px;border-radius:6px;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);
}
.round-cell-label{font-size:9px;font-weight:800;color:rgba(255,255,255,0.4);letter-spacing:.02em}
.round-cell-mult{font-size:9.5px;font-weight:800;color:rgba(255,255,255,0.65);font-family:'Baloo 2',sans-serif}
.round-cell--beaten{background:color-mix(in srgb, var(--bb-acid) 30%, transparent);border-color:var(--bb-acid)}
.round-cell--beaten .round-cell-label,.round-cell--beaten .round-cell-mult{color:var(--bb-acid)}
.round-cell--current{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,0.25)}
.round-cell--current .round-cell-mult{color:#fff}

/* ── Target balls — the shoot triggers, top-left/top-right/above the
   keeper. Positioned as % of goal-wrap so they track the goal's own
   320x200 coordinate space regardless of viewport width. Hidden/inert
   until a bet is placed. ─────────────────────────────────────────── */
.target-layer{
  position:absolute;inset:0;z-index:15;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.target-layer--active{opacity:1;pointer-events:auto}
.target-ball{
  position:absolute;width:34px;height:34px;padding:0;border:none;background:none;
  cursor:pointer;touch-action:manipulation;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  opacity:.55;transition:transform .12s,opacity .12s;
}
.target-ball svg{width:100%;height:100%;display:block}
.target-ball:active:not(:disabled){transform:scale(0.88);opacity:.9}
.target-ball:disabled{opacity:.25;cursor:not-allowed}
/* The 3 targets share one row, positioned so the ball's own top edge sits
   just underneath the crossbar (crossbar's visual bottom edge is ~21% of
   goal-wrap's height). Left/right targets sit just inside the posts
   (interior edges at 16.875% / 83.125%) — close enough to almost touch
   them without overlapping. */
.target-ball--tl{left:18%;top:21%}
.target-ball--tr{right:18%;top:21%;left:auto}
.target-ball--top{left:50%;top:21%;transform:translateX(-50%)}
.target-ball--top:active:not(:disabled){transform:translateX(-50%) scale(0.88)}
.btn-inner{display:flex;flex-direction:column;align-items:center;gap:2px}
.btn-main{
  display:flex;align-items:center;gap:7px;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:18px;letter-spacing:.04em;
  position:relative;
}
/* ── Info panel overlay ──────────────────────────────── */
.info-panel{
  position:absolute;inset:0;z-index:200;
  display:flex;flex-direction:column;
  background:var(--bb-stage);
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.info-panel.open{transform:translateY(0)}
.info-header{
  flex:0 0 auto;background:var(--bb-plum);
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;border-bottom:1px solid rgba(255,255,255,0.08);
}
.info-title{
  font-family:'Baloo 2',sans-serif;font-weight:800;font-style:italic;
  font-size:17px;letter-spacing:-.01em;line-height:1;
}
.info-close{
  width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.8);
  display:flex;align-items:center;justify-content:center;
}
.info-close:active{background:rgba(255,255,255,0.2)}
.info-body{
  flex:1;overflow-y:auto;padding:16px 16px 32px;
  -webkit-overflow-scrolling:touch;
}
.info-section-title{
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--bb-accent);
  margin:20px 0 8px;
}
.info-section-title:first-child{margin-top:0}
.info-list{list-style:none;padding:0;margin:0}
.info-list li{
  font-size:13px;color:rgba(255,255,255,0.8);line-height:1.55;
  padding:5px 0 5px 16px;border-bottom:1px solid rgba(255,255,255,0.05);
  position:relative;
}
.info-list li::before{content:'–';position:absolute;left:0;color:rgba(255,255,255,0.3)}
.info-cta{margin-top:28px;text-align:center}
.info-cta p{font-size:13px;color:rgba(255,255,255,0.5);margin-bottom:10px}
.info-play-btn{
  background:var(--bb-accent);color:#000;border:none;cursor:pointer;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:15px;
  padding:12px 0;border-radius:12px;width:100%;
  letter-spacing:.03em;
}
.info-play-btn:active{opacity:.85}