/* HUM's page: the shared skin is ../module.css (site/public/module.css), the stage's layout and controls included; this
   is only what's HUM's own. The stage is the panel (the 3D model's face texture, its knobs and jacks drawn by
   ../parts.js and its MAINS toggle and slots by js/stage.js, where assets/panel.json puts them) beside a bulb on
   FLICKER and a scope on OUT (js/stage.js, js/lamp.js); the figure is the grid, drawn by the engine (js/grid.js).
   HUM is gold like every page; the bulb's amber is the bulb's, in its picture. */

/* ---------- the stage ---------- */
/* 12 HP, drawn the same height as every other panel */
.stage { --panel-ratio: 60.66 / 128.5; --panel-max: 335px; --panel-max-narrow: 311px; }
.p2-slot svg { filter: none; }                      /* a mounting slot: a hole, so no shadow */
.p2-bat { transition: transform 0.07s linear; }     /* MAINS snaps */

/* the bulb on FLICKER above the scope on OUT */
#lamp { display: block; width: 100%; aspect-ratio: 16 / 12; }
/* what goes into the jacks; STRIKE and FLICKER light gold as they fire */
#legend {
  list-style: none; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 10px;
  font: 400 0.7rem/1 "Space Mono", ui-monospace, monospace; color: var(--dim);
}
#legend li { border: 1px solid var(--s-line); padding: 0.32rem 0.45rem; transition: background 0.25s, color 0.25s; }
#legend li b { color: var(--ink); font-weight: 700; margin-right: 0.15rem; }
#legend li.hit { background: rgba(212, 175, 55, 0.2); border-color: var(--gold-line); color: var(--ink); transition: none; }
#legend li.hit b { color: var(--gold-hi); }
/* without the engine, just the panel */
.stage.no-engine .stage-side, .stage.no-engine .stage-hint { display: none; }
.stage.no-engine .stage-inner { grid-template-columns: minmax(0, 1fr); }

/* ---------- the grid: where PITCH lands, drawn by the engine (js/grid.js) ---------- */
#grid { width: 100%; max-width: 640px; aspect-ratio: 4 / 3; }
.grid-key { display: inline-block; width: 18px; height: 3px; vertical-align: middle; margin: 0 4px 2px 0; }
.grid-key-50 { background: var(--gold); }
.grid-key-60 { background: var(--dim); margin-left: 12px; }

@media (prefers-reduced-motion: reduce) { .p2-bat { transition: none; } }