#stage-wrap { position: relative; height: 62vh; min-height: 340px; margin: 0 0 20px; border-radius: 18px; overflow: hidden; background: var(--stage-bg, #08070c); }
#stage { display: block; width: 100%; height: 100%; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (max-width: 600px) { #stage-wrap { height: 56vh; min-height: 300px; border-radius: 12px; } }

/* split view (#split, app.js): stage pinned on the left, players scroll on the right */
.th-toggle.split-toggle { right: auto; left: 12px; } /* beats theater.css, which loads later */
@media (max-width: 899px) { .th-toggle.split-toggle { display: none; } }
@media (min-width: 900px) {
  body.split main { max-width: none; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(360px, 1fr); column-gap: 24px; align-items: start; }
  body.split .top { grid-column: 1 / -1; }
  body.split .proscenium { position: sticky; top: 12px; margin-bottom: 0; }
  body.split #stage-wrap { height: calc(100vh - 110px); min-height: 300px; margin-bottom: 0; }
}
