/* Pooka's page: the shared skin is ../module.css (site/public/module.css), and with it the stage's layout, parts and
   controls; this is only what's Pooka's own. The stage is the panel, its knobs playable (js/panel2d.js), its screen
   drawn in the window by the module's own firmware (js/stage.js). Under The voices each voice plays its own 16 s
   performance, the screen and OUT as the firmware's desktop simulator renders them, its knob list lit as each knob
   turns. Pooka is gold, the default accent; the voices and their knobs are in Space Mono, as the module's own screen
   names them. */

:root {
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --lcd-paper: #282c2a;     /* the screen run dark: its unlit pixels (the lit ones are #cdd2c8) */
}

img, video { max-width: 100%; }

/* ---------- the stage: 20 HP, so module.css's panel scale as it is (THUMP's) ---------- */
/* the screen: the window the panel cuts, and in it the LCD's 400 x 240 active area (0.25 mm bigger all round), its
   pixels drawn by the firmware; until the first frame the face's own dark screen shows through */
.p2-window { position: absolute; overflow: hidden; pointer-events: none; }
.p2-window canvas { position: absolute; display: block; }

/* ---------- the voices: each one's screen and sound, beside its four knobs ---------- */
.family { font-size: 1.05rem; font-weight: 500; color: var(--dim); margin-top: clamp(2.2rem, 5vh, 3.2rem); }
.voice {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.2rem clamp(1.25rem, 3vw, 2.5rem); align-items: start;
  padding: 1.8rem 0; border-top: 1px solid var(--hair);
}
.family + .voice { margin-top: 0.9rem; }
.lcd { border: 1px solid var(--s-line); }
.lcd video { display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: fill; background: var(--lcd-paper); }
.transport { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.9rem; }
.play { flex: none; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.65rem 1rem; }
.play svg { width: 0.7rem; height: 0.7rem; fill: currentColor; }
.play[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.timeline { position: relative; flex: 1; height: 1.6rem; min-width: 0; }
.timeline .track, .timeline .done { position: absolute; left: 0; top: 1rem; height: 2px; }
.timeline .track { right: 0; background: var(--s-line); }
.timeline .done { width: 0; background: var(--accent); }
.timeline .tick { position: absolute; top: 0; transform: translateX(-50%); font: 700 0.62rem/1 var(--mono); color: var(--dim); }
.about { min-width: 0; }
.voice-name { font: 700 1.45rem/1 var(--mono); letter-spacing: 0.04em; color: var(--ink); margin-bottom: 0.8rem; }
.about > p { color: var(--dim); font-size: 0.95rem; }
.about .feature-list { margin: 1rem 0; gap: 0.5rem; }
/* each knob's line is marked with its letter, not the dot, and lights while that knob turns */
.knobs li { padding-left: 1.5rem; transition: color 0.25s ease; }
.knobs li::before {
  content: attr(data-k); top: 0; width: auto; height: auto; background: none; border-radius: 0;
  font: 700 0.8rem/1.52rem var(--mono); color: var(--dim);
}
.knobs li.on { color: var(--ink); }
.knobs li.on::before, .knobs li.on strong { color: var(--accent); }

@media (max-width: 900px) {
  .voice { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .knobs li { transition: none; } }