/* Rregullo: "Qite n’zhivë!". Builds on site.css and loja.css (header, sound switch, layout, panel, buttons). */

.zh-stage { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.zh-level { width: 100%; max-width: 560px; height: auto; aspect-ratio: 184 / 166; overflow: hidden; user-select: none; -webkit-user-select: none; }
/* the camera passes over the letters on its way into the O: feather the stage's sides so nothing is cut hard */
.zh-level {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.zh-stage.is-draggable { cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.zh-stage.is-dragging { cursor: grabbing; }

.zh-lead { color: var(--soft); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.45; max-width: 36ch; }
.zh-start { margin-top: 24px; }
.zh .btn-quiet { border: 0; font-family: inherit; cursor: pointer; }
.zh-meter { transition: opacity .2s var(--ease-out); }
/* in the whole-logo view only the logo shows: no horizon, no meter */
.zh-play-only { transition: opacity .4s var(--ease-out); }
.zh-level.is-logo .zh-play-only, .zh-level.is-logo .zh-meter { opacity: 0; }
.zh-meter.is-empty { opacity: 0; }
.zh-done .done-actions { margin-top: 24px; }
.zh-more { margin-top: 18px; font-size: 15px; }
.zh-more a { color: var(--paper); text-decoration-color: rgba(241, 242, 239, .4); text-underline-offset: 3px; }
.zh-more a:hover { text-decoration-color: var(--lime); }

/* Touch and mouse control: a plain level slider, quiet until it is needed */
.zh-control { width: min(100%, 360px); margin-top: 4px; }
.zh-slider {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 48px; margin: 0;
  background: transparent; cursor: pointer; touch-action: pan-y;
}
.zh-slider:focus { outline: none; }
.zh-slider::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: var(--line-strong); }
.zh-slider::-moz-range-track { height: 2px; border-radius: 2px; background: var(--line-strong); }
.zh-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -13px; border: 0; border-radius: 50%;
  background: var(--paper); box-shadow: 0 0 0 6px rgba(241, 242, 239, .08);
}
.zh-slider::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 6px rgba(241, 242, 239, .08); }
.zh-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--lime); }
.zh-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--lime); }
.zh-ends { display: flex; justify-content: space-between; margin-top: -6px; color: var(--mute); font-size: 13px; }

/* The panels share one cell (loja.css); give the stack the height of the tallest so nothing jumps */
@media (prefers-reduced-motion: no-preference) {
  .zh-intro, .zh-play, .zh-done { transition: opacity .35s var(--ease-out); }
  .loja-panel > .is-off { opacity: 0; }
}

/* Phones: title, the level, then the words. The level stays in the first screen with its button close by. */
@media (max-width: 959px) {
  .zh-stage { width: 100%; margin-top: 4px; }
  .zh-level { width: min(100%, 34svh, 420px); }
  .zh-control { width: min(100%, 420px); }
}
@media (max-width: 480px) {
  .zh-start { width: 100%; justify-content: center; }
}