*{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-wallKit) 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. */
.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%}
.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. */
  position:absolute;left:50%;top:89%;
  transform:translate(-50%,-100%);
  transform-origin:center bottom;transition:none;
  z-index:5;
}
/* Wall stands in its own band between the goal and the kick spot — not
   overlaid on the goal itself, so it reads as standing in front of it.
   Pulled up further still so heads land at the keeper's glove height
   (gloves sit well above his feet), not just above his feet. -20% -> -23%
   to compensate for the wall SVG's viewBox growing 115->130 (taller
   defenders), which otherwise pushes the same absolute pull-up amount
   proportionally less far up the now-taller element. */
.wall-band{width:100%;margin-top:-23%;position:relative;z-index:6;pointer-events:none}
/* 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}
/* Posts always render in front of the ball — a shot near a post should
   never look ambiguous about whether it went in or out. */
.posts-front-layer{position:absolute;top:0;left:0;right:0;z-index:25;pointer-events:none}
.arc-wrap{
  position:relative;margin-top:2px;
  display:flex;flex-direction:column;align-items:center;
}
.spot-ball{position:relative;z-index:1}
/* shoot button — one wide comic-style 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:3px solid #000;cursor:pointer;border-radius:13px;
  padding:8px 0 9px;font-family:'Baloo 2',sans-serif;
  font-weight:800;font-size:19px;letter-spacing:.05em;
  overflow:hidden;background:var(--bb-wallKit);color:#fff;
  box-shadow:0 5px 0 #000,0 8px 16px 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.32),rgba(255,255,255,0) 45%);
}
.shoot-btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #000,0 4px 10px rgba(0,0,0,0.35)}
/* 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}
/* 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}
.quick-stake-btn:disabled{opacity:.35;cursor:not-allowed}
/* ── Wall size control ───────────────────────────────── */
.wall-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);
}
.wall-label{
  font-size:13px;font-weight:700;letter-spacing:.08em;
  color:rgba(255,255,255,0.45);text-transform:uppercase;
}
.wall-btn{
  width:52px;height:52px;border-radius:12px;border:2px solid #000;cursor:pointer;
  background:var(--bb-wallKit2);color:#fff;font-size:22px;
  box-shadow:0 3px 0 #000;
  display:flex;align-items:center;justify-content:center;
  font-family:'Baloo 2',sans-serif;
  touch-action:manipulation;
  -webkit-appearance:none;appearance:none;
}
.wall-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #000}
.wall-val{
  font-family:'Baloo 2',sans-serif;font-size:18px;font-weight:800;
  color:var(--bb-acid);min-width:88px;text-align:center;
}
/* ── Difficulty selector — replaces the old wall-size stepper; wall size
   is now automatic, driven by round progress. ─────────────────── */
.difficulty-btns{flex:1;display:flex;gap:8px;max-width:280px}
.diff-btn{
  flex:1;background:var(--bb-wallKit2);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, 4 corners + 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}
/* ── Animations ──────────────────────────────────────────── */
/* Wall players idle-bob — runs in each figure's own local SVG units (~90x150
   box), so the ±4-unit bob reads as subtle regardless of how large the wall
   band renders on screen. Each figure gets a negative animation-delay (see
   wallSvg()/renderWall() in index.php/game.js) so the wall doesn't bob in
   unison. */
@keyframes wall-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.wall-bob-anim { animation: wall-bob 2.4s ease-in-out infinite; }