/* One glass strip: native horizontal faders retain their audio owners. */
.game-topbar:has(.stage-mix) { flex-wrap: nowrap; }
.game-topbar:has(.stage-mix) .game-heading { flex: 1 1 180px; }
.game-topbar:has(.stage-mix) .game-input-status { flex: 0 1 130px; }
.stage-mix {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(88px, 1fr); gap: 18px;
  position: relative; flex: 0 1 720px; min-width: 0; padding: 6px 70px 6px 14px; border: 1px solid #bdd8e532; border-radius: 12px;
  background: linear-gradient(130deg, #183043b8, #0a1525d1);
  box-shadow: inset 0 1px #e1f7ff14, inset 0 -1px #0004, 0 5px 18px #0002;
}
.stage-mix.stage-mix-paired { flex-basis: 900px; grid-auto-columns: minmax(70px, 1fr); gap: 12px; }
/* The groups keep their semantic labels; each fader gets the same visual row. */
.stage-mix-deck { display: contents; }
.stage-mix-deck[hidden], .stage-mix-track[hidden] { display: none !important; }
.stage-mix-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stage-mix-track {
  --mix-cap: #a4ebd4; --mix-glow: #77ddbd40; --mix-soft: #123b37;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 16px 24px;
  gap: 0 7px; align-items: center; min-width: 0; margin: 0;
  color: #e0e9f4; font-size: 11px; line-height: 16px; letter-spacing: 0;
}
.stage-mix-track:has(#game-mic-level) { --mix-cap: #ffb9ca; --mix-glow: #ed98b440; --mix-soft: #472637; }
.stage-mix-track:has(#game-mic-level-two) { --mix-cap: #edbdfd; --mix-glow: #d99bed40; --mix-soft: #3b2847; }
.stage-mix-track:has(#game-vocal) { --mix-cap: #82dcff; --mix-glow: #58d1ff40; --mix-soft: #12384c; }
.stage-mix-track:has(#game-effects) { --mix-cap: #c4abff; --mix-glow: #b18cff40; --mix-soft: #302747; }
.stage-mix-track:has(#game-neon) { --mix-cap: #ffd187; --mix-glow: #ffca7440; --mix-soft: #4b3921; }
.stage-mix-track:has(#game-effects-two) { --mix-cap: #f6b3e6; --mix-glow: #ee9edc40; --mix-soft: #45283f; }
.stage-mix-track:has(#game-neon-two) { --mix-cap: #ffb397; --mix-glow: #ffab8140; --mix-soft: #493027; }
.stage-mix-caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.stage-mix-paired .stage-mix-deck[data-player="1"] .stage-mix-caption::before { content: "P1 "; color: #a9c0d6; font-weight: 400; }
.stage-mix-paired .stage-mix-deck[data-player="2"] .stage-mix-caption::before { content: "P2 "; color: #ddb6d4; font-weight: 400; }
.stage-mix-track output { font-size: 10px; font-variant-numeric: tabular-nums; color: var(--mix-cap); text-align: right; }
.stage-mix-track input[type="range"] {
  --mix-level: 0%; appearance: none; -webkit-appearance: none; writing-mode: horizontal-tb; direction: ltr;
  grid-column: 1 / -1; width: 100%; min-width: 0; height: 24px; min-height: 24px; padding: 0; margin: 0;
  border: 0; border-radius: 5px; cursor: ew-resize; background: transparent; accent-color: var(--mix-cap); touch-action: pan-y;
}
.stage-mix-track input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px; border: 1px solid #0005;
  background: linear-gradient(to right, var(--mix-cap) 0 var(--mix-level), #a6bfd32b var(--mix-level) 100%);
  box-shadow: 0 1px #d8efff12, inset 0 1px 2px #0005;
}
.stage-mix-track input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; width: 13px; height: 20px; margin-top: -9px;
  border: 1px solid var(--mix-cap); border-radius: 4px;
  background: linear-gradient(90deg, transparent 42%, #183145aa 44% 54%, transparent 56%), linear-gradient(#f8ffffe6, var(--mix-cap) 32% 66%, var(--mix-soft));
  box-shadow: inset 0 1px #fff9, inset 0 -1px #0006, 0 2px 3px #0008, 0 0 8px var(--mix-glow);
}
.stage-mix-track input[type="range"]::-moz-range-track {
  height: 3px; border-radius: 4px; background: #a6bfd32b; box-shadow: 0 1px #d8efff12, inset 0 1px 2px #0005;
}
.stage-mix-track input[type="range"]::-moz-range-progress { height: 3px; border-radius: 4px; background: var(--mix-cap); }
.stage-mix-track input[type="range"]::-moz-range-thumb {
  width: 11px; height: 18px; border: 1px solid var(--mix-cap); border-radius: 4px;
  background: linear-gradient(90deg, transparent 42%, #183145aa 44% 54%, transparent 56%), linear-gradient(#f8ffffe6, var(--mix-cap) 32% 66%, var(--mix-soft));
  box-shadow: inset 0 1px #fff9, inset 0 -1px #0006, 0 2px 3px #0008, 0 0 8px var(--mix-glow);
}
.stage-mix-track input[type="range"]:focus-visible { outline: 2px solid var(--mix-cap); outline-offset: 2px; }
.stage-mix-track input[type="range"]:disabled { opacity: .35; cursor: default; }
@media (max-width: 1100px) {
  .game-topbar:has(.stage-mix) { flex-wrap: wrap; }
  .game-topbar .stage-mix { flex: 1 1 100%; order: 5; }
}
@media (max-width: 580px) {
  .game-topbar:has(.stage-mix) .game-heading { flex: 1 1 0; }
  .game-topbar:has(.stage-mix) .game-input-status { flex: 1 1 100%; }
  .game-topbar .stage-mix, .game-topbar .stage-mix.stage-mix-paired {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; padding: 8px 13px;
  }
  .stage-mix-track { grid-template-rows: 16px 28px; font-size: 11px; }
  .stage-mix-track input[type="range"] { height: 28px; min-height: 28px; }
}
@media (forced-colors: active) {
  .stage-mix-track input[type="range"] { appearance: auto; -webkit-appearance: auto; }
}

/* EQ opens over the chart; the closed header keeps the same single-row height. */
.stage-eq {position: absolute; right: 10px; top: 6px; bottom: 6px; width: 46px; z-index: 20;}
.stage-eq>summary {height: 100%; min-height: 40px; display: grid; place-items: center; list-style: none; border: 1px solid #c0dbea38; border-radius: 7px; background: #a4d9db10; font-size: 11px; font-weight: 650; letter-spacing: .05em; cursor: pointer;}
.stage-eq>summary::-webkit-details-marker {display: none;}
.stage-eq[open]>summary {color: #fff7e7; border-color: #d5f4e180; background: #94d7c524;}
.stage-eq-panel {position: absolute; top: calc(100% + 14px); right: -10px; width: min(330px, calc(100vw - 32px)); max-height: min(600px, calc(100dvh - 180px)); overflow-y: auto; padding: 18px; border: 1px solid #c3e2e65c; border-radius: 14px; color: #e0e9f4; background: linear-gradient(135deg,#173142f5,#0b1728f7); box-shadow: 0 14px 50px #0007; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); text-align: left;}
.stage-eq-panel>strong {font-size: 14px; font-weight: 650;}
.stage-eq-panel>p {font-size: 11px; line-height: 1.5; color: #adbfcd; margin: 7px 0 14px;}
.stage-eq-channel {display: grid; grid-template-columns: 1fr auto; gap: 7px 14px; padding-top: 10px; border-top: 1px solid #c3e2e623;}
.stage-eq-channel+.stage-eq-channel {margin-top: 15px;}
.stage-eq-channel[hidden] {display: none;}
.stage-eq-player {align-self: center; font-size: 11px; color: #c4d5e0;}
.stage-eq-channel>button {padding: 5px 9px; min-height: 28px; border: 1px solid #b6cfdb44; border-radius: 6px; background: #badcdf0b; font-size: 11px;}
.stage-eq-channel>.stage-mix-track {grid-column: 1 / -1; grid-template-rows: 16px 28px;}
.stage-eq-channel input[type="range"] {height: 28px; min-height: 28px;}
@media(max-width:580px){.game-topbar .stage-mix,.game-topbar .stage-mix.stage-mix-paired{padding-right:70px;}.stage-eq{bottom:auto;height:42px;top:9px;}.stage-eq-panel{max-height:calc(100dvh - 200px);}}

.stage-eq:not([open]) .stage-eq-panel {display: none;}

.stage-mix-paired>.stage-mix-deck>.stage-mix-track {font-size:10px; column-gap:4px;}
.stage-mix-paired>.stage-mix-deck>.stage-mix-track output {font-size:9px;}

/* The effect name is also its picker; its closed state uses the existing caption row. */
.stage-mix-track>.stage-effect-toggle {
  display: block; width: 100%; min-width: 0; min-height: 0; height: 20px; padding: 0 10px 0 0;
  position: relative; border: 0; border-radius: 3px; color: inherit; background: transparent;
  font: inherit; line-height: 20px; text-align: left; letter-spacing: 0; cursor: pointer;
}
.stage-effect-toggle::after {content: "⌄"; position: absolute; right: 0; top: -1px; color: var(--mix-cap);}
.stage-effect-toggle:hover,.stage-effect-toggle[aria-expanded="true"] {color: var(--mix-cap);}
.stage-effect-toggle:focus-visible {outline: 2px solid var(--mix-cap); outline-offset: 2px;}
.stage-effect-toggle:disabled {opacity: .5; cursor: default;}
.stage-effect-menu {
  position: absolute; z-index: 25; top: calc(100% + 9px); right: 0;
  width: min(330px, calc(100vw - 32px)); max-height: min(460px, calc(100dvh - 200px)); overflow-y: auto;
  box-sizing: border-box; padding: 16px; border: 1px solid #c3e2e65c; border-radius: 14px;
  color: #e0e9f4; background: linear-gradient(135deg,#173142f5,#0b1728f7);
  box-shadow: 0 14px 50px #0007; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); text-align: left;
}
.stage-effect-menu[hidden] {display: none;}
.stage-effect-menu>strong {font-size: 13px;}
.stage-effect-menu>p {font-size: 11px; line-height: 1.5; margin: 7px 0 12px; color: #adbfcd;}
.stage-effect-menu>.stage-effect-status {margin: 10px 0 0;}
.stage-effect-choices {display: grid; gap: 6px;}
.stage-effect-choices>button {
  display: grid; gap: 3px; min-height: 52px; padding: 9px 12px; border: 1px solid #b6cfdb33; border-radius: 8px;
  color: #e0e9f4; background: #badcdf08; text-align: left; font-size: 12px;
}
.stage-effect-choices>button>small {font-size: 10px; line-height: 1.45; color: #b0c2d2;}
.stage-effect-choices>button[aria-pressed="true"] {border-color: #d7e7c970; background: #b6ddce19;}
.stage-effect-choices>button:focus-visible {outline: 2px solid #c9efe1; outline-offset: 2px;}
.stage-effect-choices>button:disabled {opacity: .45;}
@media (pointer: coarse) {.stage-mix-track>.stage-effect-toggle {height: 26px; margin: -3px 0; line-height: 26px;}}