/* GIF GIF GIF's page: the shared skin is ../module.css (site/public/module.css), which lays out the stage and draws its
   parts as every module page has them; this is only what's GIF GIF GIF's own: its wide stage (36 HP, the panel wider
   than it's tall, so it takes the wider column), its screen with the OSD, and the gifs to pick, beside the flat panel
   (js/stage.js, js/panel2d.js); and the 3D model under Inside. It's gold, as every page is. It makes no sound, so it has
   no Listen. */

/* ---------- the stage: the panel (36 HP, 182.58 mm) on the left, the wider column ---------- */
.stage { --panel-ratio: 182.58 / 128.5; --panel-max: 1009px; --panel-max-narrow: 937px; }
.stage-inner {
  max-width: 1320px; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 1.4rem clamp(1rem, 2.5vw, 2rem);
}
.stage-hint { max-width: none; }
.stage-noscript { display: block; width: 100%; height: auto; }
#face-name { margin-left: auto; color: var(--gold); font: italic 700 0.78rem/1 "Space Mono", ui-monospace, monospace; }
/* the gate jacks: held, the hole gold (their ring is lit, panel2d.js) */
.p2-gate { touch-action: none; }
.p2-gate.high .p2-hole { fill: var(--gold); }

/* the screen: the module's video out, its OSD over the picture, and what's on it under it */
.tv-screen { position: relative; border-radius: 8px; overflow: hidden; background: #040504; }
.tv-screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 3px);
}
#screen { display: block; width: 100%; aspect-ratio: 4 / 3; image-rendering: pixelated; }
#patch-caption { min-height: 2.8em; }
#osd {
  position: absolute; left: 6%; right: 6%; bottom: 7%; z-index: 1;
  display: grid; gap: 3px; pointer-events: none;
  font-family: "Space Mono", ui-monospace, monospace; text-shadow: 0 1px 0 #000, 0 0 6px #000;
  transition: opacity 0.15s;
}
/* the readout fades in over the picture and dissolves, as the module's does */
#osd[hidden] { display: grid; opacity: 0; visibility: hidden; transition: opacity 0.6s, visibility 0s 0.6s; }
.osd-lane { font-size: 0.66rem; color: var(--gold); letter-spacing: 0.1em; }
.osd-name { font-size: clamp(0.95rem, 2.4vw, 1.3rem); font-weight: 700; color: var(--ink); }
.osd-bar { display: block; height: 7px; margin-top: 3px; background: rgba(238, 236, 228, 0.2); box-shadow: 0 1px 0 #000; }
.osd-bar i { display: block; height: 100%; background: var(--ink); }
/* the gifs, a thumb each */
#clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
#clips button {
  display: grid; gap: 5px; padding: 3px 3px 6px; min-width: 0;
  background: transparent; border: 1px solid var(--s-line); border-radius: 0; cursor: pointer;
  font: 400 0.7rem/1 "Space Mono", ui-monospace, monospace; color: var(--dim);
}
#clips span { min-width: 0; overflow-wrap: anywhere; line-height: 1.15; }   /* a long name wraps in its tile */
#clips img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #000; }
#clips button:hover { border-color: var(--gold); color: var(--ink); }
#clips button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
/* without WebGL the screen can't run: the panel alone, still there to look at */
.stage.no-webgl .stage-inner { grid-template-columns: minmax(0, 1fr); max-width: 960px; }
.stage.no-webgl .stage-hint, .stage.no-webgl .stage-side { display: none; }

/* ---------- inside: the 3D model, full width ---------- */
.inside-model { margin-top: clamp(1.8rem, 4vw, 2.8rem); }
#module { aspect-ratio: 16 / 11; }
.inside-model #module { aspect-ratio: 16 / 9; }
#inside-model.no-webgl #module, #inside-model.no-webgl .view-bar { display: none; }
#inside-model.no-webgl .stage-fallback { display: block; max-width: none; padding: 0; }

@media (max-width: 900px) {
  .stage-inner { grid-template-columns: minmax(0, 1fr); }
  .stage-hint { max-width: var(--panel-max-narrow); }
  #module, .inside-model #module { aspect-ratio: 4 / 3; }
  .pillar-hot { grid-column: 1 / -1; }
}