/* Pump's own look, on the game template (static/game.css styles the shell): one canvas stage (static/pump.js draws the
   balloon, the pump and the hose) and, in Auto, "Cash out after N pumps" set on the stage with a hairline stepper. */

.pm-stage { position: relative; flex: 1; min-height: 410px; }
.pm-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: manipulation; }
.pm-cv:focus-visible { box-shadow: inset 0 0 0 1.5px rgb(216 165 72 / .7); border-radius: 14px; }
.pm-auto { --k: 8px; position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 12px 0 14px; white-space: nowrap; font: 500 13px/1 var(--f-ui); color: var(--ink-2); isolation: isolate;
  background: rgb(216 165 72 / .55); clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k)); }
.pm-auto::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; background: var(--stage);
  clip-path: polygon(calc(var(--k) - .88px) 0, 100% 0, 100% calc(100% - calc(var(--k) - .88px)), calc(100% - calc(var(--k) - .88px)) 100%, 0 100%, 0 calc(var(--k) - .88px)); }
.pm-auto[hidden] { display: none; }
.pm-auto b { font: 800 24px/1 var(--f-num); color: var(--ink); min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.pm-auto em { font: 700 18px/1 var(--f-num); font-style: normal; color: var(--gold); font-variant-numeric: tabular-nums; margin-left: 2px; }
.pm-st { --k: 5px; width: 30px; height: 28px; border: 0; padding: 0; display: grid; place-items: center; background: var(--cell); color: var(--ink-2); cursor: pointer; flex: none;
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
  transition: background-color var(--t-hover), color var(--t-hover), transform var(--t-press); }
.pm-st:hover { background: var(--cell-hi); color: var(--ink); }
.pm-st:active { transform: scale(.95); }
.pm-st:disabled { opacity: .4; cursor: default; background: var(--cell); color: var(--ink-2); }
.pm-st:focus-visible { outline: 1.5px solid var(--gold-line); outline-offset: 2px; }
.pm-st svg { width: 16px; height: 16px; }
.pm-st path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gm.autoplaying .pm-auto { opacity: .6; } .gm.autoplaying .pm-st { pointer-events: none; }
@media (max-width: 899px) {
  .gm[data-game="pump"] .gm-play { min-height: 0; }
  .pm-auto { gap: 6px; padding: 0 10px 0 12px; }
}