/* Portrait/desktop retain their existing layout. */
#landscape-heading, #rehearsal-settings-close { display: none; }
#rehearsal-settings { display: contents; }

/* Enabled only with a loaded script on a short landscape viewport. */
#top-bar.compact-landscape {
  position: fixed;
  box-sizing: border-box;
  padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 4px max(8px, env(safe-area-inset-left));
  box-shadow: 0 2px 8px #0002;
  font: 14px/1.3 system-ui, sans-serif;
}
.compact-landscape > h1,
.compact-landscape #leftside-controls,
.compact-landscape #upload-copy,
.compact-landscape #quicktip { display: none !important; }
.compact-landscape #landscape-heading {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding-left: 48px;
}
.compact-landscape .compact-brand { font-weight: 700; }
.compact-landscape #landscape-role {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.compact-landscape #rehearsal-settings-toggle,
.compact-landscape #rehearsal-settings-close {
  min-height: 44px; padding: 8px 12px; font: inherit; font-weight: 600;
  border: 1px solid #cbd5e1; border-radius: 8px; background: #f1f5f9; color: #172033; cursor: pointer;
}
.compact-landscape #hamburger {
  display: flex !important; position: absolute; top: env(safe-area-inset-top); left: max(8px, env(safe-area-inset-left));
  width: 44px; height: 48px; margin: 0;
}
.compact-landscape #control-buttons {
  display: flex !important; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 8px; margin: 0; width: 100%; max-width: none;
}
.compact-landscape #control-buttons > * { flex: 0 0 auto; margin: 0; }
.compact-landscape #control-buttons button { min-width: 44px; min-height: 44px; }
.compact-landscape #control-buttons img { width: 40px; height: 40px; object-fit: contain; }
.compact-landscape #control-buttons #delay-button img { width: 22px; height: 22px; }
.compact-landscape #control-buttons #self-tape-open { padding: 0; }
.compact-landscape #status { font-size: 12px; max-width: 140px; }
.compact-landscape #loadstatus { width: 36px; height: 36px; }
.compact-landscape #rehearsal-settings { display: none; }
.compact-landscape.settings-open #rehearsal-settings,
.compact-landscape #mobile-menu.open {
  display: block !important; position: absolute; top: 100%; left: 0; right: 0;
  box-sizing: border-box; width: 100%; min-width: 0; max-width: none;
  max-height: calc(100vh - var(--rehearsal-header-height, 104px) - 8px);
  max-height: calc(100dvh - var(--rehearsal-header-height, 104px) - 8px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 16px; border-radius: 0 0 12px 12px; box-shadow: 0 8px 16px #0003;
}
.compact-landscape.settings-open #rehearsal-settings { background: white; }
.compact-landscape #rehearsal-settings-close { display: block; margin-left: auto; }
.compact-landscape #characters { width: 100%; max-width: 100%; }
.compact-landscape #characters tbody { max-height: none; overflow: visible; }
.compact-landscape #characters select { min-height: 44px; }
.compact-landscape #characters .me input { min-width: 24px; min-height: 24px; }
.compact-landscape #scene-select { max-width: 75%; min-height: 44px; }
.compact-landscape #mobile-menu a { box-sizing: border-box; min-height: 44px; font-size: 14px; }
.compact-landscape #userInfo { position: static; color: white; font-size: 14px; margin: 8px; }
.compact-landscape #credits { text-align: left; }
body:has(.compact-landscape) #script { margin-top: 8px; padding-top: 0; }
body:has(.compact-landscape) #home-center-col,
body:has(.compact-landscape) #logintouploadcontainer,
body:has(.compact-landscape) #support { display: none; }