/* The performance, selection and audio areas have separate layout boxes.
   Only the decorative music backdrop is positioned over the performance box. */
.stage-surface {
  --stage-muted: #aebfd6;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(400px, 1fr) auto auto;
  gap: 16px;
  min-width: 0;
  overflow: hidden;
  padding: 22px;
  border: 1px solid #354761;
  border-radius: 24px;
  background: var(--theme-stage, #101c2f);
  color: #f4f7fc;
  box-shadow: 0 18px 50px #17294018;
}
.stage-surface:fullscreen {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: 20px 24px;
  overflow: auto;
}
.stage-surface::backdrop { background: #101c2f; }
.stage-topbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}
.stage-brand { display: flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 750; letter-spacing: -.5px; }
.stage-brand > .icon { width: 30px; height: 30px; color: var(--lime); }
.stage-brand-dot { color: var(--lime); }
.stage-brand small { display: block; margin-top: 2px; font-size: 8px; font-weight: 650; letter-spacing: 2px; color: var(--stage-muted); }
.stage-secondary {
  display: inline-flex; justify-content: center; align-items: center; gap: 7px;
  min-height: 42px; padding: 9px 12px; border: 1px solid #50617e; border-radius: 10px;
  background: #25354d; color: #f2f6fc; font-size: 12px; font-weight: 650;
}
.stage-secondary:hover { background: #344961; }
.stage-main { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; min-width: 0; min-height: 0; }
.stage-spotlight {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #34465f;
  border-radius: 18px;
  background: radial-gradient(ellipse at 50% 12%, #37467152, transparent 74%), var(--theme-stage, #142238);
}
.stage-backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; user-select: none; }
.stage-equalizer {
  position: absolute; inset: auto 0 0; display: flex; align-items: flex-end; justify-content: center;
  gap: 7px; width: 100%; max-width: none; height: 76%; margin: 0; padding: 0 18px;
  opacity: .24; pointer-events: none;
}
.stage-equalizer i {
  display: block; flex: 1 1 0; min-width: 0; height: 100%;
  border-radius: 6px 6px 0 0; background: linear-gradient(#c5efa1, #6b8fe0 65%, #455f9140);
  transform: scaleY(.04); transform-origin: bottom center; pointer-events: none;
}
.stage-backdrop::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 38%, #122035bc 0%, #12203580 37%, transparent 80%);
}
.stage-spotlight-topline {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; min-width: 0; padding: 18px 20px 0;
}
.stage-scene-label { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; font-size: 9px; letter-spacing: 1.4px; color: #c7d5e9; font-weight: 700; }
.stage-scene-label i { width: 6px; height: 6px; border-radius: 50%; background: #8493a9; }
.stage-surface[data-playing="true"] .stage-scene-label i { background: var(--lime); box-shadow: 0 0 12px #b9ed8666; }
.stage-track-badge {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 65%; padding: 6px 10px;
  border: 1px solid #465976; border-radius: 20px; background: #142238b3; color: #dae5f6; font-size: 11px;
}
.stage-track-badge .icon { width: 14px; height: 14px; flex-shrink: 0; }
.stage-track-badge span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-performer-spotlight {
  position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column;
  align-items: center; justify-content: center; min-width: 0; min-height: 0;
  width: 100%; padding: 24px 20px 30px; text-align: center;
}
.stage-kicker { max-width: 100%; font-size: 9px; font-weight: 750; letter-spacing: 2.2px; color: var(--lime); }
.stage-spotlight h1 {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  max-width: 100%; margin: 12px 0 10px; padding: 0 8px; font-size: clamp(32px, 4vw, 60px);
  line-height: 1.08; letter-spacing: -1.8px; color: #fff; overflow-wrap: anywhere; text-wrap: balance;
}
.stage-tagline { margin: 7px 0 12px; font-size: 14px; color: var(--stage-muted); }
.stage-has-avatars .stage-tagline { display: none; }
.stage-director {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; min-height: 0;
  padding: 18px; border: 1px solid #354761; border-radius: 18px; background: var(--theme-stage-panel, #19283e);
}
.stage-director-heading > span { font-size: 9px; letter-spacing: 1.8px; font-weight: 750; color: var(--lime); }
.stage-director-heading h2 { margin: 5px 0 0; color: #f4f7fc; font-size: 17px; line-height: 1.25; letter-spacing: -.3px; }
.stage-performer-field { display: block; min-width: 0; width: 100%; margin: 0; color: #d3ddec; font-size: 11px; }
.stage-performer-field > span { color: var(--stage-muted); font-weight: 400; }
.stage-surface input:not([type="range"]):not([type="checkbox"]), .stage-surface select {
  width: 100%; min-width: 0; min-height: 40px; margin-top: 6px; padding: 9px 10px;
  background: #20324b; border-color: #536984; color: #fff; font-size: 12px;
}
.stage-surface input::placeholder { color: #9eafc8; }
.stage-director .stage-teacher-actions select { margin-top: 0; }
.stage-surface input:focus, .stage-surface select:focus { border-color: #b9d29c; box-shadow: 0 0 0 3px #b9ed8626; }
.stage-surface :is(button,input,select):focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.stage-surface input[type="range"], .stage-surface input[type="checkbox"] { accent-color: var(--lime); }
.stage-surface input[type="range"] { min-width: 0; min-height: 24px; margin: 0; padding: 0; cursor: pointer; }
.stage-control-deck {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 180px;
  gap: 20px; min-width: 0; padding: 15px 18px; border: 1px solid #3b4e68; border-radius: 18px;
  background: var(--theme-stage-panel, #19283e);
}
.stage-music-deck { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(240px, 1fr); align-items: end; gap: 10px 24px; min-width: 0; }
.stage-track-select { display: block; min-width: 0; color: #dae4f3; font-size: 11px; }
.stage-music-deck select { text-overflow: ellipsis; }
.stage-transport { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 0 0 1px; }
.stage-play {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; min-width: 92px;
  padding: 10px 14px; border-radius: 10px; background: var(--lime); color: #173322; font-size: 14px; font-weight: 750;
}
.stage-play:hover { background: #cef5a9; }
.stage-loop { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-left: auto; font-size: 11px; color: #dae4f3; }
.stage-loop input { margin: 0; }
.stage-timeline { min-width: 0; }
.stage-timeline input { display: block; width: 100%; }
.stage-time { display: flex; justify-content: space-between; gap: 8px; margin-top: 1px; font-size: 10px; font-variant-numeric: tabular-nums; color: var(--stage-muted); }
.stage-volume-label { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 36px; color: #c8d5e8; font-size: 10px; }
.stage-volume-label .icon { width: 16px; height: 16px; flex-shrink: 0; }
.stage-volume-label span { flex-shrink: 0; }
.stage-volume-label input { flex: 1; width: 0; }
.stage-horn-deck { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-left: 20px; border-left: 1px solid #3d506b; }
.stage-horn {
  display: flex; flex: 1; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: 6px 9px;
  min-height: 74px; padding: 10px; border: 1px solid #ffda82; border-radius: 12px; background: #f5c968;
  color: #3c2a0e; box-shadow: 0 3px 0 #a37a35;
}
.stage-horn > .icon { width: 25px; height: 25px; }
.stage-horn > span { font-size: 18px; font-weight: 800; letter-spacing: -.5px; }
.stage-horn small { flex-basis: 100%; font-size: 10px; }
.stage-horn:hover { background: #ffda87; }
.stage-horn.horn-active { transform: translateY(2px); box-shadow: 0 1px 0 #a37a35; }
.stage-status { margin: 0; min-height: 17px; color: #b5c6dc; font-size: 11px; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
@media (min-width: 901px) and (max-height: 800px) {
  .stage-surface:fullscreen { grid-template-rows: 42px minmax(0, 1fr) auto auto; gap: 12px; padding: 16px 20px; }
  .stage-surface:fullscreen .stage-main { grid-template-columns: minmax(0, 1fr) 270px; gap: 12px; }
  .stage-surface:fullscreen .stage-director { padding: 14px; gap: 12px; overflow-y: auto; }
  .stage-surface:fullscreen .stage-performance-bar { gap: 10px; }
  .stage-surface:fullscreen .stage-teacher-controls { padding-top: 10px; }
  .stage-surface:fullscreen .stage-picker-status,
  .stage-surface:fullscreen .stage-teacher-status { margin-top: 6px; }
  .stage-surface:fullscreen .stage-spotlight-topline { padding: 14px 16px 0; }
  .stage-surface:fullscreen .stage-performer-spotlight { padding: 14px 16px 16px; }
  .stage-surface:fullscreen .stage-spotlight h1 { font-size: clamp(30px, 3.8vw, 50px); margin: 10px 0 6px; }
  .stage-surface:fullscreen .stage-control-deck { padding: 12px 16px; }
}
@media (max-width: 1100px) {
  .stage-surface { padding: 18px; gap: 14px; }
  .stage-main { grid-template-columns: minmax(0, 1fr) 250px; gap: 12px; }
  .stage-director { padding: 15px; }
  .stage-control-deck { grid-template-columns: minmax(0, 1fr) 150px; gap: 14px; }
  .stage-music-deck { column-gap: 14px; }
  .stage-horn-deck { padding-left: 14px; }
  .stage-volume-label .icon { display: none; }
}
@media (max-width: 900px) {
  .stage-surface, .stage-surface:fullscreen { display: flex; flex-direction: column; }
  .stage-main { display: flex; flex-direction: column; }
  .stage-spotlight { min-height: 370px; }
  .stage-director { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 22px; }
  .stage-director-heading { grid-column: 1 / -1; }
  .stage-control-deck { grid-template-columns: minmax(0, 1fr) 140px; }
  .stage-music-deck { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .stage-transport { grid-row: 2; }
}
@media (max-width: 600px) {
  .stage-surface, .stage-surface:fullscreen { padding: 12px; gap: 12px; border-radius: 18px; }
  .stage-surface:fullscreen { border-radius: 0; }
  .stage-brand { font-size: 17px; gap: 5px; }
  .stage-brand > .icon { width: 24px; height: 24px; }
  .stage-brand small { font-size: 6px; letter-spacing: 1.3px; }
  #stage-fullscreen { padding: 9px; font-size: 10px; gap: 5px; }
  #stage-fullscreen .icon { width: 15px; height: 15px; }
  .stage-spotlight { min-height: 340px; }
  .stage-spotlight-topline { align-items: flex-start; gap: 10px; padding: 14px 12px 0; }
  .stage-scene-label { font-size: 8px; letter-spacing: .8px; padding-top: 7px; }
  .stage-track-badge { max-width: 57%; font-size: 10px; padding: 6px 8px; }
  .stage-performer-spotlight { padding: 24px 10px 18px; }
  .stage-spotlight h1 { margin: 12px 0 6px; font-size: 34px; letter-spacing: -1px; }
  .stage-kicker { font-size: 8px; letter-spacing: 1.5px; }
  .stage-tagline { font-size: 12px; }
  .stage-equalizer { gap: 4px; padding: 0 9px; }
  .stage-director { display: flex; gap: 14px; }
  .stage-control-deck { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
  .stage-horn-deck { padding: 12px 0 0; border-left: 0; border-top: 1px solid #3d506b; }
  .stage-horn { min-height: 55px; flex-wrap: nowrap; }
  .stage-horn small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .stage-scene-label i { box-shadow: none; } }