/* Original skin surfaces with custom playback controls in their original locations. */
.object-dialog[data-room="music"] { width:min(710px,calc(100vw - 20px)); background:transparent; border:0; box-shadow:none; overflow:auto; }
[data-room="music"] .dialog-inner { padding:18px; }
[data-room="music"] .dialog-head { margin-bottom:10px; }
[data-room="music"] .dialog-close { background:#e5e8eddc; }
#music-room { position:relative; }
#retro-player { container-type:inline-size; position:relative; width:100%; max-width:600px; margin:0 auto; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--readout-ink); filter:drop-shadow(0 16px 15px #07120e65); transition:aspect-ratio .3s; }
#retro-player[data-skin="darkstar"] { max-width:465px; }
#retro-player[data-skin="reactor"] { max-width:385px; }
#retro-player[data-skin="classic"] { border:2px outset #dedede; }
#skin-art { position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
#player-display { position:absolute; display:flex; flex-direction:column; align-items:stretch; justify-content:center; min-width:0; padding:var(--display-pad); border:0; border-radius:0; background:transparent; box-shadow:none; text-align:center; text-shadow:0 0 5px #7ea0cc50; color:var(--readout-ink); font-family:var(--readout-font); line-height:var(--readout-line); letter-spacing:var(--readout-spacing); overflow:hidden; }
#audio-status { flex:none; font:600 calc(var(--readout-size) * .62)/1 var(--readout-font); letter-spacing:max(.04em,var(--readout-spacing)); text-transform:var(--readout-transform); white-space:nowrap; }
#audio-time { flex:none; font:400 var(--clock-size)/.94 var(--readout-font); font-variant-numeric:tabular-nums; letter-spacing:var(--readout-spacing); white-space:nowrap; }
#track-title { flex:none; width:100%; min-width:0; margin:.18em 0 0; font:400 var(--readout-size)/var(--readout-line) var(--readout-font); letter-spacing:var(--readout-spacing); text-transform:var(--readout-transform); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#audio-progress { flex:none; width:100%; height:2px; margin:.3em 0 0; accent-color:var(--readout-ink); }
[data-skin="darkstar"] #audio-status,[data-skin="darkstar"] #audio-progress { display:none; }
[data-skin="darkstar"] #player-display { justify-content:center; }
[data-skin="quicksilver"] #audio-status { display:none; }
[data-skin="quicksilver"] #audio-progress { margin-top:.12em; }
[data-skin="reactor"] #audio-status { opacity:.8; }
[data-skin="series9"] #track-title { font-weight:600; }
[data-skin="compact"] #audio-time { letter-spacing:-.035em; }
[data-skin="classic"] #audio-status { font-weight:400; }
#retro-player .skin-hit { position:absolute; padding:0; border:0; border-radius:3px; background:transparent; color:inherit; min-height:0; cursor:pointer; }
.skin-hit > span { opacity:0; }
#retro-player .skin-hit:hover { background:#edf8ff20; box-shadow:inset 0 0 0 1px #d8ecff80; }
#retro-player .skin-hit:active { background:#03182750; }
#retro-player .skin-hit:disabled { background:#1114; }
#retro-player[data-playing="true"][data-skin="reactor"] #audio-play { background:#314724; }
#retro-player[data-playing="true"][data-skin="reactor"] #audio-play span { opacity:1; font-size:0; }
#retro-player[data-playing="true"][data-skin="reactor"] #audio-play span::after { content:'Ⅱ'; font-size:18px; }
.music-toolbar { display:flex; align-items:center; justify-content:center; gap:9px; width:fit-content; max-width:100%; margin:20px auto 0; padding:9px 12px; background:#e0e2e7ed; border:2px outset #f4f4f6; box-shadow:0 4px 12px #14231d30; color:#23262a; font:12px Tahoma,sans-serif; }
.music-toolbar select { min-width:0; max-width:270px; padding:4px; font:12px Tahoma,sans-serif; background:white; color:#26292e; border:2px inset #ddd; }
.music-toolbar button { border:2px outset #eee; background:#dddfe3; min-height:28px; padding:0 7px; cursor:pointer; }
.music-source { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:15px; margin:12px auto; color:#fff; font:12px/1.5 Tahoma,sans-serif; text-shadow:0 1px 3px #000; }
.music-source button { padding:0; background:none; border:0; color:inherit; text-decoration:underline; min-height:25px; font:inherit; cursor:pointer; }
.spotify-host { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); opacity:0; pointer-events:none; }
.spotify-host[data-expanded="true"] { position:relative; width:100%; height:352px; clip-path:none; opacity:1; pointer-events:auto; margin:10px 0; border-radius:12px; }
.spotify-host iframe { width:100%; height:352px; border:0; }
#music-room .media-message,#skin-error { font:13px/1.5 Tahoma,sans-serif; color:white; text-shadow:0 1px 3px #000; text-align:center; }
#music-room .skin-credit { color:#e2e7e5; text-shadow:0 1px 3px #000; font:11px Tahoma,sans-serif; margin-top:12px; }
@media(max-width:650px) { [data-room="music"] .dialog-inner { padding:8px; } #retro-player { max-width:min(100%,600px); } .music-toolbar { gap:6px; padding:8px; } .music-toolbar select { max-width:220px; } }
@media(max-height:760px) { #retro-player[data-skin="darkstar"] { max-width:350px; } #retro-player[data-skin="reactor"] { max-width:300px; } #retro-player[data-skin="compact"] { max-width:420px; } }