/* Visual sizing only. Original PNG dimensions and aspect ratios remain untouched. */
:root {
  --instrument-stage-height: min(42vh, 340px);
}

#previewPage {
  height: calc(100dvh - 78px);
  min-height: 0;
  overflow: hidden;
}

#previewPage .lead {
  margin-top: 14px;
  margin-bottom: 16px;
}

#previewPage .carousel {
  flex: 1 1 var(--instrument-stage-height);
  min-height: 230px;
  max-height: var(--instrument-stage-height);
  align-items: stretch;
}

#previewPage .instrument-card {
  height: auto;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  align-items: center;
  justify-items: stretch;
}

#previewPage .instrument-card .art {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 4px 0;
  overflow: hidden;
  position: relative;
}

#previewPage .instrument-card .art img {
  position: absolute;
  inset: 0;
}

.performance {
  height: calc(100dvh - 78px);
  min-height: 0;
  overflow: hidden;
}

.performance .performance-head,
.performance .test-keys,
.performance .bottom-bar {
  flex: 0 0 auto;
}

.performance .performance-grid {
  min-height: 0;
}

.perform-slot.has-image,
.perform-slot.has-image .visual,
.perform-slot.has-image .visual-art {
  min-height: 0;
}

.perform-slot.has-image .visual-art {
  position: relative;
}

.perform-slot.has-image .visual-art img {
  position: absolute;
  inset: 0;
}

.perform-slot.has-image .visual {
  padding: 8px 18px 6px;
}

.perform-slot.has-image h3 {
  margin: 4px 0 0;
}

.perform-slot.has-image p {
  margin: 2px 0;
}

#previewPage .instrument-card .art img,
.perform-slot.has-image .visual-art img,
.instrument img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform: scale(var(--instrument-visual-scale, 1));
  transform-origin: center;
}

/* Independent optical sizing for the five instruments. */
[data-sound="ban"],
[data-instrument="ban"],
.instrument[data-id="ban"] {
  --instrument-visual-scale: .84;
}

[data-sound="danpigu"],
[data-instrument="danpigu"],
.instrument[data-id="danpigu"] {
  --instrument-visual-scale: 1.17;
}

[data-sound="naobo"],
[data-instrument="naobo"],
.instrument[data-id="naobo"] {
  --instrument-visual-scale: .78;
}

[data-sound="daluo"],
[data-instrument="daluo"],
.instrument[data-id="daluo"] {
  --instrument-visual-scale: 1;
}

[data-sound="xiaoluo"],
[data-instrument="xiaoluo"],
.instrument[data-id="xiaoluo"] {
  --instrument-visual-scale: .684;
}

@media (max-height: 850px) and (min-width: 751px) {
  :root {
    --instrument-stage-height: min(39vh, 310px);
  }

  #previewPage {
    padding-top: 26px;
    padding-bottom: 18px;
  }

  #previewPage h1 {
    font-size: clamp(38px, 4.4vw, 62px);
  }

  #previewPage .lead {
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.55;
  }
}

@media (max-width: 750px) {
  :root {
    --instrument-stage-height: min(47vh, 360px);
  }

  #previewPage {
    height: auto;
    min-height: calc(100dvh - 78px);
    overflow: visible;
  }

  #previewPage .carousel {
    min-height: 280px;
  }

  .performance {
    height: auto;
    min-height: calc(100dvh - 78px);
    overflow: visible;
  }
}