/* SCORPION's page: the shared skin and stage are ../module.css (site/public/module.css); this is only what's SCORPION's
   own. The page is gold like every module's; only the panel's own lights keep their colour: the lamp's warm white and
   the blood's red, and the cables theirs. */

/* 12 HP at the line's scale */
.stage { --panel-ratio: 60.66 / 128.5; --panel-max: 335px; --panel-max-narrow: 311px; overflow-x: clip; }

/* the panel's layers over the face: the windows' covers (the bare board going dark behind a light as it comes up),
   each window's light screened over its board (its sprite masking the lit colour), the knobs and jacks (parts.js),
   the cables, and each window's bloom screened over everything, as the mockup lights a window on black
   (js/panel2d.js sets the colours and the levels by opacity) */
.panel2d { isolation: isolate; }
.p2-covers { position: absolute; pointer-events: none; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; }
.p2-win { position: absolute; pointer-events: none; opacity: 0; }
.p2-win { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.p2-light { z-index: 1; mix-blend-mode: screen; }
.p2 { z-index: 2; }
.p2-cables { position: absolute; pointer-events: none; z-index: 3; left: 0; top: 0; width: 100%; height: 100%; }
.p2-bloom { z-index: 4; mix-blend-mode: screen; }

/* beside the panel: the level against the line, the stomps, the blood; the last thing that happened; the line and
   the blood in words */
#scope { display: block; width: 100%; height: 150px; }
.status { min-height: 1.4em; }
.readout { min-height: 1.4em; font: 400 0.74rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--ink); }
#patch-note { min-height: 7.4em; }