*{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:12px}
.game-title{font-weight:800;font-style:italic;letter-spacing:-.01em;font-size:37px;line-height:.95;
  text-shadow:2px 2px 0 rgba(0,0,0,0.4)}
.outcome-row{
  height:34px;display:flex;align-items:center;justify-content:center;margin-top:7px;
}
.outcome-pill{
  font-weight:800;font-size:18px;
  background:rgba(12,40,18,0.42);border-radius:999px;
  border:2px solid var(--bb-acid);
  display:inline-flex;align-items:center;padding:4px 16px;
}
/* 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}
.ball-absolute{position:absolute;z-index:20}
/* 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)}
/* 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 ────────────────────────────────── */
.quick-stakes-row{
  flex:0 0 auto;display:flex;gap:6px;
  padding:6px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background:#1A0636;
  border-top:1px solid rgba(255,255,255,0.06);
}
.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}
/* ── 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;
}
.btn-inner{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px}
.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;
}
.btn-odds{
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:16px;
  letter-spacing:.04em;color:var(--bb-acid);opacity:.9;
}
/* ── Shot history strip ──────────────────────────────── */
.history-strip{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:3px;padding:5px 10px;min-height:30px;
}
.hist-item{
  position:relative;
  width:22px;height:22px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:800;line-height:1;
  background:color-mix(in srgb, var(--bb-wallKit) 28%, transparent);
  border:1px solid color-mix(in srgb, var(--bb-wallKit) 55%, transparent);
}
.hist-x{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.hist-empty{font-size:10px;color:rgba(255,255,255,0.22);letter-spacing:.06em;text-transform:uppercase}
/* ── 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 ──────────────────────────────────────────── */
@keyframes outcome-pop {
  0%   { transform:scale(0.5); opacity:0; }
  70%  { transform:scale(1.08); }
  100% { transform:scale(1); opacity:1; }
}
.outcome-animated { animation: outcome-pop 0.25s ease-out 0.45s both; }
/* 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; }