/* Music player (music.js): a now-playing chip bottom right (moved from the left 8 Oct 2026: it covered menu buttons), a panel to manage the songs. HUD style. */
.mus { position: fixed; z-index: 45; right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: stretch;
  max-width: min(330px, calc(100vw - 28px)); font-family: var(--hud, system-ui);
  background: linear-gradient(180deg, rgba(14,26,38,.92), rgba(5,10,15,.94)); border: 1px solid rgba(114,220,255,.3);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); box-shadow: inset 0 0 24px -10px rgba(24,191,255,.5); }
.mus button { background: none; border: 0; color: #cfeefc; cursor: pointer; font: inherit; }
.mus-open { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; min-width: 0; text-align: left; position: relative; }
.mus-open img { width: 38px; height: 38px; object-fit: cover; flex: none; border: 1px solid rgba(114,220,255,.35); background: #0a1118; }
.mus-open img[src=""] { visibility: hidden; }
.mus .mt { display: grid; min-width: 0; }
.mus .mt b { font: 700 14px/1.1 var(--hud, system-ui); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #e9f5fb; }
.mus .mt small { font: 600 10.5px/1.3 var(--hud, system-ui); letter-spacing: .16em; text-transform: uppercase; color: #72DCFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mus-pp, .mus-nx { width: 38px; font-size: 13px !important; border-left: 1px solid rgba(114,220,255,.15) !important; }
.mus-pp:hover, .mus-nx:hover, .mus-open:hover { background: rgba(24,191,255,.12); }
/* equaliser bars over the cover while playing */
.mus .eq { position: absolute; left: 6px; top: 6px; width: 38px; height: 38px; display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding-bottom: 6px;
  background: linear-gradient(0deg, rgba(3,7,11,.75), transparent 70%); opacity: 0; transition: opacity .3s; }
.mus .eq i { width: 4px; height: 30%; background: #72DCFF; box-shadow: 0 0 6px #18BFFF; }
.mus.playing .eq { opacity: 1; }
.mus.playing .eq i { animation: eq .9s ease-in-out infinite alternate; }
.mus.playing .eq i:nth-child(2) { animation-duration: .7s; animation-delay: -.3s; }
.mus.playing .eq i:nth-child(3) { animation-duration: 1.1s; animation-delay: -.6s; }
.mus.playing .eq i:nth-child(4) { animation-duration: .8s; animation-delay: -.2s; }
@keyframes eq { from { height: 18%; } to { height: 70%; } }
.mus.muted { opacity: .75; }
.mus.muted .mt b { color: #8fa3b0; }

/* panel */
.mus-panel { position: fixed; z-index: 46; right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(76px + env(safe-area-inset-bottom, 0px)); width: min(380px, calc(100vw - 28px)); max-height: min(560px, calc(100dvh - 120px));
  display: grid; grid-template-rows: auto auto auto 1fr auto; font-family: var(--sans, system-ui); color: #e8f2f8;
  background: linear-gradient(180deg, rgba(12,22,32,.97), rgba(4,8,12,.98)); border: 1px solid rgba(114,220,255,.35);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); box-shadow: 0 30px 60px -20px #000, inset 0 0 40px -16px rgba(24,191,255,.5);
  animation: musIn .25s cubic-bezier(.2,.8,.2,1); }
@keyframes musIn { from { transform: translateY(14px); opacity: 0; } }
.mus-panel header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 10px; border-bottom: 1px solid rgba(114,220,255,.15); }
.mus-panel header small { display: block; font: 600 11px var(--hud, system-ui); letter-spacing: .3em; text-transform: uppercase; color: #72DCFF; }
.mus-panel header b { font: 700 22px/1 var(--hud, system-ui); text-transform: uppercase; letter-spacing: .04em; }
.mus-panel .sw { display: flex; align-items: center; gap: 8px; cursor: pointer; font: 700 12px var(--hud, system-ui); letter-spacing: .14em; text-transform: uppercase; }
.mus-panel .sw input { position: absolute; opacity: 0; }
.mus-panel .sw span { width: 40px; height: 20px; border-radius: 10px; background: #1d3242; position: relative; transition: background .2s; }
.mus-panel .sw span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #8fa3b0; transition: transform .2s, background .2s; }
.mus-panel .sw input:checked + span { background: #0f6d93; }
.mus-panel .sw input:checked + span::after { transform: translateX(20px); background: #72DCFF; box-shadow: 0 0 8px #18BFFF; }
.mus-panel .sw input:focus-visible + span { outline: 2px solid #72DCFF; outline-offset: 2px; }
.mus-panel .row { display: flex; align-items: center; gap: 12px; padding: 8px 16px; font: 600 12px var(--hud, system-ui); letter-spacing: .14em; text-transform: uppercase; color: #8fa3b0; }
.mus-panel .row input[type=range] { flex: 1; accent-color: #18BFFF; }
.mus-panel .opts { gap: 18px; flex-wrap: wrap; }
.mus-panel .opts label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.mus-panel input[type=checkbox] { accent-color: #18BFFF; }
.mus-panel .list { overflow-y: auto; padding: 4px 8px 8px; border-top: 1px solid rgba(114,220,255,.12); scrollbar-width: thin; }
.mus-panel h4 { display: flex; justify-content: space-between; align-items: center; margin: 10px 8px 4px; font: 700 12px var(--hud, system-ui); letter-spacing: .2em; text-transform: uppercase; color: #E0BE72; }
.mus-panel h4 button { background: none; border: 1px solid rgba(114,220,255,.25); color: #8fa3b0; font: 600 10px var(--hud, system-ui); letter-spacing: .14em; text-transform: uppercase; padding: 2px 8px; cursor: pointer; }
.mus-panel .tr { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 5px 8px; border-left: 2px solid transparent; }
.mus-panel .tr:hover { background: rgba(24,191,255,.07); }
.mus-panel .tr.now { border-left-color: #18BFFF; background: linear-gradient(90deg, rgba(24,191,255,.16), transparent); }
.mus-panel .tr.off { opacity: .45; }
.mus-panel .tp { background: none; border: 0; padding: 0; text-align: left; color: inherit; cursor: pointer; min-width: 0; font: inherit; }
.mus-panel .tp b { display: block; font: 600 14px/1.2 var(--sans, system-ui); }
.mus-panel .tr.now .tp b { color: #72DCFF; }
.mus-panel .tp small { display: block; font-size: 12px; color: #728A9B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mus-panel .tr > span { font: 500 11px var(--mono, monospace); color: #728A9B; }
.mus-panel footer { padding: 10px 16px 12px; font-size: 12px; color: #728A9B; border-top: 1px solid rgba(114,220,255,.12); }
.mus-panel footer a { color: #72DCFF; }

/* in the arena the hand dock owns the bottom: sit above it on desktop, use the HUD button on phones */
body.arena .mus { bottom: calc(232px + env(safe-area-inset-bottom, 0px)); }
body.arena .mus-panel { bottom: auto; top: 56px; }
.mus-btn { display: none; }
@media (max-width: 700px) {
  .mus .mt { display: none; }
  .mus-open { padding-right: 6px; }
  body.arena .mus { display: none; }
  body.arena .mus-btn { display: inline-block; }
  body.arena .mus-panel { left: 14px; right: 14px; width: auto; }
}
body.ending .mus, .insp:not([hidden]) ~ .mus { opacity: .35; }
@media (prefers-reduced-motion: reduce) { .mus.playing .eq i { animation: none; height: 50%; } }
/* phones: sideways in the arena the HUD button takes over too; on the menu pages the page can scroll clear of the chip */
@media (orientation: landscape) and (max-height: 560px) {
  .mus .mt { display: none; }
  body.arena .mus { display: none; }
  body.arena .mus-btn { display: inline-block; }
  body.arena .mus-panel { top: 44px; max-height: calc(100dvh - 54px); }
}
@media (max-width: 700px), (orientation: landscape) and (max-height: 560px) {
  body:not(.arena) { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
/* a visible close button, and on phones the panel takes only what it needs */
.mus-panel header { gap: 10px; }
.mus-panel header > div { margin-right: auto; }
.mus-panel .mus-x { flex: none; width: 40px; height: 40px; margin: -6px -8px -6px 0; background: none; border: 1px solid rgba(114,220,255,.3); color: #cfeefc; font: 400 24px/1 var(--sans, system-ui); cursor: pointer; }
.mus-panel .mus-x:hover { background: rgba(24,191,255,.12); }
.mus-panel h4 button { font-size: 12px; min-height: 30px; }
.mus-panel .tr > span { font-size: 12px; }
@media (max-width: 700px) {
  .mus-panel { max-height: min(440px, calc(100dvh - 150px)); }
  .mus-panel header { padding: 10px 12px 8px; }
  .mus-panel header b { font-size: 18px; }
  .mus-panel footer { padding: 8px 12px 10px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  body:not(.arena) .mus-panel { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - 80px); }
}
/* phones, upright and sideways (8 and 9 Oct 2026): no floating chip over the page at all; a "Music" button in the header opens the panel, which
   drops down under the header (the match keeps its own HUD button) */
@media (max-width: 700px), (orientation: landscape) and (max-height: 560px) {
  body:not(.arena) .mus { display: none; }
  body:not(.arena) .bar .mus-btn { display: inline-block; }
  body:not(.arena) .mus-panel { top: calc(56px + env(safe-area-inset-top, 0px)); bottom: auto; left: 12px; right: 12px; width: auto; max-height: calc(100dvh - 80px); }
}