/* CANARY'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 bird and the brass are what they are. */

/* 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 room, above the panel: a picture and what you can do in it */
.room { 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))); }
#room-view { display: block; width: 100%; height: clamp(74px, 15cqw, 98px); }
.room-do { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; margin-top: 4px; }
.room-do button { appearance: none; background: none; border: 1px solid var(--s-line); color: var(--ink, #d7d2c4); font: 400 0.7rem/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; }
.room-do button:hover, .room-do button:focus-visible { background: rgba(212, 175, 55, 0.14); outline: none; }
.room-do button[aria-pressed="true"], .room-do button.on { background: rgba(212, 175, 55, 0.24); border-color: rgba(212, 175, 55, 0.7); }
@media (max-width: 620px) { .room-do { grid-template-columns: repeat(3, minmax(0, 1fr)); } .room-do button { min-height: 42px; font-size: 0.78rem; } }

/* the cage: the lamp in its window, its light on the panel, the bird, the brass in front */
.cg-lamp, .cg-halo, .cg-shadow, .cg-bird, .cg-cage, .cg-bottle { position: absolute; pointer-events: none; }
.cg-lamp { z-index: 1; background-repeat: no-repeat; }
.cg-lamp + .cg-lamp { opacity: 0; }
.cg-halo { z-index: 1; opacity: 0; background: radial-gradient(closest-side, rgba(255, 186, 96, 0.34), rgba(255, 186, 96, 0.1) 46%, rgba(255, 186, 96, 0)); }
.cg-bottle { z-index: 1; opacity: 1; display: block; }
.cg-shadow { z-index: 2; opacity: 0.55; filter: brightness(0) blur(0.45em); will-change: transform; }
.cg-bird { z-index: 3; will-change: transform; display: block; }
.cg-cage { z-index: 4; display: block; }
.cg-hold { position: absolute; z-index: 5; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.cg-hold:focus-visible { outline: 2px solid rgba(212, 175, 55, 0.8); outline-offset: 1px; }
.p2 { z-index: 6; }

/* beside the panel: what it's singing, and the air */
#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; }