:root{
  /* pinball */
  --cabinet:#14110f; --frame:#241d17; --field:#0d1714;
  --steel:#74828b; --flip:#c4492b; --flip-hot:#ff7a4d;
  --bumper:#e0a13a; --bumper-hot:#ffd884;
  --ball:#eef1f3; --lane-off:#26352e; --lane-on:#39d49b;
  /* climb */
  --sky:#0e1822; --plat:#5a8c5a; --plat-spring:#e0a13a; --plat-move:#4a7fb0; --plat-break:#9c8466;
  --chimp:#8a5a3c; --chimp-dark:#5a3a26; --chimp-face:#d8b48c;
  --spider:#2a2230; --spider-eye:#e0533a;
  /* shared */
  --ink:#e9ecef; --muted:#8a958f; --accent:#e0a13a; --spent:#3a332b;

  --stage-w: min(86vw, 340px);
  --stage-max-h: 78vh;
  --hud-gap: 12px;
}
:root.light{
  --cabinet:#e8e3d8; --frame:#d8cdbb; --field:#10221b; --sky:#bfd6e6;
  --ink:#1c1a16; --muted:#6c6a62; --spent:#c9c1b2;
  --spider:#3a2f44; --spider-eye:#c8401f; --plat-break:#7a6a52;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{
  margin:0; height:100%; overflow:hidden;
  background:var(--cabinet); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  touch-action:none; overscroll-behavior:none;
}
#app{ height:100%; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:10px; padding:10px;
  touch-action:none; overscroll-behavior:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; cursor:pointer; }

#hud{ width:var(--stage-w); display:flex; align-items:center; justify-content:space-between; gap:var(--hud-gap);
  font-size:13px; letter-spacing:.04em; color:var(--muted); }
#hud .score{ color:var(--ink); font-variant-numeric:tabular-nums; font-size:15px; }
#hud .score::after{ content:" m"; color:var(--muted); font-size:12px; }
#balls{ display:flex; gap:5px; }
#balls i{ width:18px; height:18px; display:block;
  background:var(--chimp-url) center/contain no-repeat; }
#balls i.spent{ opacity:.28; filter:grayscale(1); }

/* charge meter only matters in the pinball */
#charge{ flex:1; height:8px; border-radius:4px; background:var(--lane-off);
  position:relative; overflow:hidden; display:none; }
#hud.pinball #charge{ display:block; }
#chargeFill{ height:100%; width:0%; background:var(--accent); transition:width .1s linear, background .15s ease; }
#charge.safe #chargeFill{ background:var(--lane-on); }     /* banked enough: a drain is survivable */
#charge.armed #chargeFill{ background:var(--bumper-hot); }
/* floor marker — left of it, a drain costs a life */
#charge::after{ content:''; position:absolute; top:0; bottom:0; left:var(--floor-pos,12%);
  width:2px; background:rgba(255,255,255,.6); }

#stage{ position:relative; width:var(--stage-w); aspect-ratio:3/4; max-height:var(--stage-max-h);
  border-radius:14px; overflow:hidden; background:var(--frame);
  box-shadow:0 0 0 2px #000 inset, 0 10px 30px rgba(0,0,0,.5);
  touch-action:none; -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; }
canvas{ display:block; width:100%; height:100%;
  touch-action:none; -webkit-touch-callout:none; user-select:none; -webkit-user-select:none;
  -webkit-user-drag:none; outline:none; }

#flash{ position:absolute; top:14px; left:0; right:0; display:flex; justify-content:center;
  pointer-events:none; opacity:0; transition:opacity .25s; padding:0 16px; }
#flash.show{ opacity:1; }
#flash span{ background:rgba(8,14,20,.8); padding:7px 14px; border-radius:9px; font-size:12px;
  color:#e9ecef; border:1px solid rgba(255,255,255,.08); text-align:center; }

#prompt{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; text-align:center; padding:0 16px; }
#prompt span{ background:rgba(13,23,20,.78); padding:10px 16px; border-radius:10px; font-size:14px;
  color:#e9ecef; border:1px solid rgba(255,255,255,.08); }
#prompt.hide{ display:none; }

#pause{ position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(6,11,16,.62); backdrop-filter:blur(2px); cursor:pointer; z-index:5; }
#pause.show{ display:flex; }
.pause-card{ display:flex; flex-direction:column; align-items:center; gap:4px;
  background:rgba(13,23,20,.82); padding:16px 26px; border-radius:12px;
  border:1px solid rgba(255,255,255,.1); }
.pause-card strong{ color:#e9ecef; font-size:20px; letter-spacing:.5px; }
.pause-card span{ color:var(--muted); font-size:12px; }

.hint{ font-size:11px; color:var(--muted); letter-spacing:.04em; text-align:center; }