/* Keep the living hero stage independent from the long character sheet. */
@media (min-width: 761px) {
  .character-frame {
    height: clamp(900px, calc(100svh - 170px), 1100px);
    min-height: 0;
    align-items: stretch;
  }

  .character-visual {
    height: 100%;
    min-height: 0;
  }

  .character-sheet {
    height: calc(100% - 30px);
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #b89b5e88 transparent;
  }
}

/* Show the original transparent full-body illustration, including its feet. */
.character-art-window:has(.character-live-art) {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.character-reference-art.character-live-art {
  top: 1% !important;
  left: 2% !important;
  width: 96% !important;
  height: calc(100% - 300px) !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

.character-motion {
  top: 1%;
  left: 2%;
  width: 96%;
  height: calc(100% - 300px);
}

.character-visual-footer {
  bottom: 14px;
  padding: 12px 18px;
  background: linear-gradient(180deg, #081b27cf, #081b27eb);
  border: 1px solid #c4a76b55;
  border-radius: 4px;
  backdrop-filter: blur(6px);
}

@media (max-width: 760px) {
  .character-visual { min-height: 900px; }
  .character-reference-art.character-live-art,
  .character-motion { top: 2% !important; height: calc(100% - 330px) !important; }
  .character-visual-footer { left: 12px; right: 12px; padding: 10px; }
}