/* Compact local utility, independent of the game's accent colour. */
body.has-music-player { padding-bottom: var(--music-clearance, 190px); }
.music-player {
    --music-accent: #507dcc;
    --music-ink: #fff;
    position: fixed;
    z-index: 90;
    left: 12px;
    bottom: 16px;
    width: 400px;
    max-width: calc(100vw - 24px);
    padding: 14px 16px 12px;
    border: 1px solid var(--ln-strong);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: 0 8px 30px rgba(23, 32, 48, .12), 0 1px 3px rgba(23, 32, 48, .04);
    color: var(--t-strong);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}
html.dark-theme .music-player {
    --music-accent: #91b4ed;
    --music-ink: #17263e;
    background: #20252d;
    border-color: #3a424e;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .25);
}
html[data-style="immersive"] .music-player { background: #1c2026; }
.music-main-row { display: flex; align-items: center; gap: 10px; }
.music-drag { display: flex; align-items: center; flex: 1; gap: 12px; min-width: 0; cursor: grab; touch-action: none; user-select: none; border-radius: 10px; }
.music-player.is-moving .music-drag { cursor: grabbing; }
.music-art { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; background: var(--surface-muted); border: 1px solid var(--ln-soft); border-radius: 14px; }
.music-disc { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: repeating-radial-gradient(circle, #262c35 0 2px, #3d4552 3px, #262c35 4px); box-shadow: inset 0 0 0 1px #4c5563; }
.music-disc i { width: 11px; height: 11px; border: 3px solid #b7caeb; border-radius: 50%; background: #7299d9; }
.music-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.music-copy strong { font-size: 16px; font-weight: 650; letter-spacing: -.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#music-status { color: var(--t-muted); font-size: 11px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-player button { display: inline-grid; place-items: center; flex-shrink: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--t-mid); }
.music-player button svg { width: 19px; height: 19px; }
.music-player .music-icon-button { width: 36px; height: 36px; }
.music-player button:not(:disabled):hover { background: var(--surface-hover); color: var(--t-strong); }
.music-player .music-play { width: 48px; height: 48px; border-radius: 50%; color: var(--music-ink); background: var(--music-accent); }
.music-player .music-play:hover { background: color-mix(in srgb, var(--music-accent) 88%, var(--t-strong)); color: var(--music-ink); }
.music-player .music-play svg { width: 24px; height: 24px; }
.music-player :is(button, input, [tabindex]):focus-visible { outline: 2px solid var(--music-accent); outline-offset: 3px; }
.music-player :is(button, input):disabled { opacity: .35; }
.music-details { margin-top: 12px; }
.music-details[hidden] { display: none; }
.music-spectrum {
    --spectrum-active: #379a64;
    --spectrum-peak: #759c3d;
    --spectrum-grid: #dfebe2;
    margin-bottom: 11px;
    padding: 9px 10px 10px;
    border: 1px solid #deebe2;
    border-radius: 11px;
    background: #f3f8f4;
}
html.dark-theme .music-spectrum {
    --spectrum-active: #56d980;
    --spectrum-peak: #b5df7a;
    --spectrum-grid: #1b3024;
    border-color: #2a3931;
    background: #101a14;
}
.music-spectrum-caption { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 7px; color: var(--t-muted); font-size: 10px; line-height: 1.5; }
#music-spectrum-canvas { display: block; width: 100%; height: 64px; }
.music-timeline { padding-top: 1px; }
.music-slider { --music-fill: 0%; display: block; appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; height: 22px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; box-shadow: none; accent-color: var(--music-accent); }
.music-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 10px; background: linear-gradient(to right, var(--music-accent) var(--music-fill), var(--ln-strong) var(--music-fill)); }
.music-slider::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; margin-top: -4px; border: 2px solid var(--surface); border-radius: 50%; background: var(--music-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--music-accent) 35%, transparent); }
.music-slider::-moz-range-track { height: 4px; border-radius: 10px; background: var(--ln-strong); }
.music-slider::-moz-range-progress { height: 4px; background: var(--music-accent); }
.music-slider::-moz-range-thumb { width: 10px; height: 10px; border: 2px solid var(--surface); border-radius: 50%; background: var(--music-accent); }
.music-player input.music-slider:focus { border: 0; box-shadow: none; }
.music-times { display: flex; justify-content: space-between; color: var(--t-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.music-tools { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 8px; padding-top: 5px; border-top: 1px solid var(--ln-faint); }
.music-volume { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 60px; }
.music-volume-value { min-width: 32px; text-align: right; font-size: 11px; color: var(--t-muted); font-variant-numeric: tabular-nums; }
.music-player.is-morphing { overflow: hidden; will-change: width, height, filter; }
.music-morph-trail { position: fixed; z-index: 89; border: 1px solid; border-radius: 20px; pointer-events: none; }
.music-player.is-collapsed { padding: 10px 12px; border-radius: 19px; }
.music-player.is-collapsed .music-main-row { gap: 6px; }
.music-player.is-collapsed .music-drag { gap: 9px; }
.music-player.is-collapsed .music-art { flex-basis: 38px; width: 38px; height: 38px; border-radius: 11px; }
.music-player.is-collapsed .music-disc { width: 28px; height: 28px; }
.music-player.is-collapsed .music-copy strong { font-size: 14px; }
.music-player.is-collapsed .music-play { width: 40px; height: 40px; }
.music-player.is-collapsed .music-play svg { width: 21px; height: 21px; }
.music-player.is-collapsed #music-status { max-width: 104px; font-size: 10px; }
.music-player.music-obscured { visibility: hidden; pointer-events: none; }
.music-player { transition: transform .24s cubic-bezier(.22,1,.36,1), opacity .18s ease, visibility 0s; }
.music-player.is-tucked { transform: translateX(var(--music-hide-offset, -110vw)); opacity: 0; visibility: hidden; pointer-events: none; transition-delay: 0s, 0s, .24s; }
.music-player .music-hide-button { position: absolute; right: -6px; top: -10px; width: 28px; height: 28px; display: grid; place-items: center; padding: 4px; border-radius: 50%; border: 1px solid var(--ln-strong); background: var(--surface); color: var(--t-muted); cursor: pointer; }
.music-player .music-hide-button svg { width: 16px; height: 16px; }
.music-player .music-hide-button:hover { color: var(--t-strong); background: var(--surface-soft); }
.music-restore { position: fixed; left: 0; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 90; width: 38px; height: 58px; border: 1px solid var(--ln-strong); border-left: 0; border-radius: 0 14px 14px 0; color: var(--t-mid); background: var(--surface); box-shadow: 0 3px 16px rgba(0,0,0,.08); cursor: pointer; touch-action: none; }
.music-restore[hidden] { display: none !important; }
.music-restore:hover { background: var(--surface-soft); }
.music-hide-button:focus-visible, .music-restore:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }
html.mobile-keyboard .music-restore { visibility: hidden; pointer-events: none; }
html.motion-disabled .music-player { transition: none; }
@media (prefers-reduced-motion: reduce) { .music-player { transition: none; } }
@media (max-width: 1024px) and (max-height: 450px) and (orientation: landscape) {
    .music-restore { left: auto; right: 0; border-left: 1px solid var(--ln-strong); border-right: 0; border-radius: 14px 0 0 14px; }
}
.music-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 600px) {
    .music-player { padding: 12px 13px; border-radius: 18px; }
    .music-main-row { gap: 6px; }
    .music-drag { gap: 9px; }
    .music-art { flex-basis: 40px; width: 40px; height: 40px; border-radius: 11px; }
    .music-disc { width: 29px; height: 29px; }
    .music-player .music-play { width: 44px; height: 44px; }
    .music-player .music-icon-button { width: 44px; height: 44px; }
    .music-player.is-collapsed .music-play { width: 44px; height: 44px; }
    .music-tools { gap: 10px; }
    .music-slider { height: 28px; }
}