/* Music stays in normal document flow: no overlay, fixed position, or table input interception. */
[data-music-controls] { min-width:0; }
.music-controls { color:#e7efe4; font-family:inherit; margin:8px 0; min-width:0; }
.music-controls .music-control-row { display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px 14px; }
.music-controls .music-toggle,.music-controls .music-details>summary { min-height:44px; min-width:44px; box-sizing:border-box;
  font:inherit; font-size:12px; line-height:1.4; border:1px solid #617765; border-radius:9px; padding:10px 12px; color:#e7efe4;
  background:#13271f; cursor:pointer; overflow-wrap:anywhere; }
.music-controls .music-toggle { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:6px 9px; max-width:100%; }
.music-controls .music-toggle[aria-pressed=true] { border-color:#a2bc79; }
.music-controls .music-toggle:hover,.music-controls .music-details>summary:hover { background:#234333; }
.music-controls .music-note { font-size:18px; line-height:1; color:#d9ff83; }
.music-controls .music-state { color:#c1cfbf; font-size:11px; }
.music-controls .music-toggle:disabled { opacity:.7; cursor:default; }
.music-controls .music-details { min-width:0; max-width:100%; flex:1 1 100px; }
.music-controls .music-details>summary { width:max-content; max-width:100%; list-style:revert; }
.music-controls .music-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; width:min(100%,420px); margin-top:8px;
  padding:14px; border:1px solid #46604b; background:#11231d; border-radius:10px; }
.music-controls .music-panel label { font-size:13px; line-height:1.4; color:#e7efe4; margin:0; }
.music-controls .music-panel output { color:#d9ff83; font-size:13px; font-variant-numeric:tabular-nums; float:none; }
.music-controls input[type=range] { grid-column:1/-1; width:100%; min-width:0; height:44px; min-height:44px; padding:0; margin:0;
  appearance:none; -webkit-appearance:none; border:0; border-radius:0; background:transparent; touch-action:pan-y; cursor:pointer; }
.music-controls input[type=range]::-webkit-slider-runnable-track { height:6px; border-radius:9px; background:linear-gradient(90deg,#d9ff83 var(--music-volume,22%),#49634e var(--music-volume,22%)); }
.music-controls input[type=range]::-moz-range-track { height:6px; border-radius:9px; background:#49634e; }
.music-controls input[type=range]::-moz-range-progress { height:6px; border-radius:9px; background:#d9ff83; }
.music-controls input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; margin-top:-8px; border:3px solid #163022; border-radius:50%; background:#d9ff83; box-shadow:0 0 0 1px #a6c575; }
.music-controls input[type=range]::-moz-range-thumb { width:18px; height:18px; border:3px solid #163022; border-radius:50%; background:#d9ff83; }
.music-controls .music-panel p { grid-column:1/-1; margin:0; color:#c1cfbf; font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
.music-controls :is(button,summary,input):focus-visible { outline:3px solid #d9ff83; outline-offset:3px; }
[data-music-page=arena] { max-width:1380px; padding:0 32px; margin:auto; }
@media(max-width:600px) { [data-music-page=arena] { padding:0 16px; } .music-controls .music-panel { width:100%; } }
@media(max-width:380px) { .music-controls .music-details[open] { flex-basis:100%; } }
/* Reserve the same footprint before/after audio unlock. A pointerdown may
   unlock music, but must not move the control that will receive its click. */
.music-controls .music-toggle {width:240px;max-width:100%;display:grid;grid-template-columns:18px minmax(0,1fr);gap:2px 8px;min-height:62px;text-align:left}
.music-controls .music-note {grid-row:1 / 3}
.music-controls .music-state {grid-column:2;min-width:0;min-height:16px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}