/* LAIKA's page: the shared skin and stage are ../module.css (site/public/module.css); this is only what's its own. The page is gold like every
   module's; only the panel's own lights keep their colour, and the capsule is what it is. */

/* 20 HP at the line's scale */
.stage { --panel-ratio: 101.3 / 128.5; --panel-max: 560px; --panel-max-narrow: 520px; overflow-x: clip; }
.stage:focus { outline: none; }
.panel2d { overflow: visible; isolation: isolate; }
.stage-panel { position: relative; z-index: 2; }

/* the orbit above the panel, and what a hand can do to the capsule */
.cabin { margin: 0 auto 0.7rem; padding: 4px; background: #12110e; border: 1px solid var(--s-line); box-sizing: border-box;
  width: min(100%, calc(80vh * var(--panel-ratio, 101.3 / 128.5)), var(--panel-max, 560px), calc(100cqw * 128.5 / 101.3 * var(--panel-ratio, 101.3 / 128.5))); }
#orbit-view { display: block; width: 100%; height: clamp(84px, 17cqw, 110px); }
.cabin-do { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-top: 4px; }
.cabin-do button { appearance: none; background: none; border: 1px solid var(--s-line); color: var(--ink, #d7d2c4); font: 400 0.72rem/1.2 "Space Mono", ui-monospace, monospace; padding: 0.42em 0.1em; min-width: 0; white-space: nowrap; overflow: hidden; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.cabin-do button:hover, .cabin-do button:focus-visible { background: rgba(212, 175, 55, 0.14); outline: none; }
.cabin-do button[aria-pressed="true"] { background: rgba(212, 175, 55, 0.24); border-color: rgba(212, 175, 55, 0.7); }
@media (max-width: 620px) { .cabin-do button { min-height: 42px; font-size: 0.78rem; } }

/* the capsule's lights, screened over the face as the light adds to it; the cup in front, its rim catching her heart */
.lk-light, .lk-cup, .lk-cupglow { position: absolute; pointer-events: none; }
.lk-light { z-index: 1; opacity: 0; mix-blend-mode: screen; background-repeat: no-repeat; background-size: 100% 100%; }
.lk-cup { z-index: 3; display: block; }
.lk-cupglow { z-index: 4; display: block; opacity: 0; mix-blend-mode: screen; }
.lk-hold { position: absolute; z-index: 5; border-radius: 50%; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.lk-hold:focus-visible { outline: 2px solid rgba(212, 175, 55, 0.8); outline-offset: 2px; }
.lk-hold.held { box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.35); }
.p2 { z-index: 6; }

/* beside the panel: her heart, and the cabin's heat */
#scope { display: block; width: 100%; height: 210px; }
.status { min-height: 2.8em; }
.readout { min-height: 2.8em; font: 400 0.74rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--ink); }
#patch-note { min-height: 7.2em; }