/* THRENODY's page: the shared skin is ../module.css (site/public/module.css), the stage's layout and controls included;
   this is only what's THRENODY's own. The stage is the flat panel (the 3D model's face texture, its knobs and jacks
   drawn by ../parts.js, the knobs playable) beside the live score (js/stage.js, js/score.js). The figures under The
   voices and The bow are drawn by the same engine in the page (js/figures.js), gold on black like the panel.
   THRENODY is gold like every page. */

/* ---------- the stage: the panel beside the score (js/stage.js) ---------- */
/* 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 */
#score { display: block; width: 100%; aspect-ratio: 3 / 2; }
/* under the score's status: where each knob is, as the patch or a hand has it */
.knob-read { margin-top: 2px; text-align: center; min-height: 1.4em; font: 400 0.68rem/1.35 "Space Mono", ui-monospace, monospace; color: var(--dim); }
/* without the engine (stage.js didn't load): the panel alone */
.stage.no-engine .stage-side, .stage.no-engine .stage-hint { display: none; }
.stage.no-engine .stage-inner { grid-template-columns: minmax(0, 1fr); }

/* ---------- the figures: drawn by the engine in the page (js/figures.js) ---------- */
.gliss-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4rem; }
.gliss-pair canvas { width: 100%; aspect-ratio: 16 / 10; }
.fig-note { font-size: 0.8rem; color: var(--dim); margin-top: 1rem; }
.bow-fig { max-width: 680px; }
.bow-waves { width: 100%; aspect-ratio: 5 / 3; }

/* ---------- inside: the 3D model's extras ---------- */
.inside-model { margin-top: clamp(1.8rem, 4vw, 2.8rem); }
#face-name { margin-left: auto; color: var(--gold); font: italic 700 0.78rem/1 "Space Mono", ui-monospace, monospace; }
.stage-noscript { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; padding: 2rem 0; }
#inside-model.no-webgl .stage-fallback { max-width: 320px; }

@media (max-width: 620px) {
  .gliss-pair { grid-template-columns: minmax(0, 1fr); }
  .bow-waves { aspect-ratio: 4 / 3; }
}