/* Office iPod object and the Music Menu panel (with a mini player while a YouTube video is loaded). */
.music-ipod{position:absolute;left:760px;top:236px;z-index:34;width:80px;height:112px;min-width:calc(44px / var(--camera-zoom,1));min-height:calc(44px / var(--camera-zoom,1));padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transform:none;color:var(--game-ink)}
.music-ipod img{display:block;width:80px;height:112px;image-rendering:pixelated;pointer-events:none}
.music-ipod::after{content:attr(data-label);display:none;position:absolute;left:50%;bottom:100%;transform:translate(-50%,-4px);background:var(--game-paper);color:var(--game-ink);font:12px/1.3 var(--font-game);padding:2px 6px;width:max-content;max-width:calc((100vw - 24px) / var(--camera-zoom,1));box-sizing:border-box;white-space:normal;text-align:center;z-index:5;pointer-events:none}
.music-ipod:is(:hover,:focus-visible){outline:2px dashed rgba(255,226,140,.9);outline-offset:0;background:transparent;transform:none}
.music-ipod:is(:hover,:focus-visible)::after{display:block}
.photo-mode .music-ipod::after{visibility:hidden}
.music-ipod.playing img{animation:music-bob 1.2s steps(2) infinite}
@keyframes music-bob{50%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.music-ipod.playing img{animation:none}}

.music-menu{position:fixed;z-index:260;top:76px;right:16px;bottom:72px;width:min(430px,calc(100vw - 32px));display:flex;flex-direction:column;background:var(--game-hud);color:var(--game-ui-ink);border:4px solid var(--game-frame);box-shadow:0 6px 0 rgba(0,0,0,.2);overflow:hidden;font-size:14px}
.music-menu[hidden]{display:none}
.music-top{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:3px solid var(--game-frame);flex-shrink:0}
.music-top img{width:30px;height:42px;image-rendering:pixelated;flex-shrink:0}
.music-top>div{flex:1;min-width:0}
.music-top h2{margin:0;font-family:var(--font-game);font-size:11px;line-height:1.6;letter-spacing:0}
#music-now{margin:2px 0 0;font-size:12px;color:var(--game-ui-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-menu button{border-radius:0;background:var(--game-control);color:var(--game-ui-ink);border:0;box-shadow:inset 0 -3px var(--game-frame);font-size:14px;min-height:44px;padding:8px 12px;transform:none}
.music-menu button:hover{background:var(--game-control-hover);transform:none}
.music-menu button.primary,.music-menu button[aria-pressed="true"]{background:var(--game-focus);color:var(--game-hud);box-shadow:inset 0 -3px rgba(0,0,0,.28)}
.music-body{flex:1;min-height:0;overflow:auto;padding:12px 14px 16px;display:grid;align-content:start;gap:16px}
.music-body h3{margin:0 0 4px;font-family:var(--font-game);font-size:10px;line-height:1.7;letter-spacing:0}
.music-hint{margin:0 0 8px;font-size:12px;color:var(--game-ui-muted)}
.music-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.music-volume{display:flex;align-items:center;gap:8px;flex:1 1 160px;font-size:12px;color:var(--game-ui-muted)}
.music-volume input{flex:1;min-width:0;min-height:32px;accent-color:var(--game-focus)}
.music-message{margin:0;font-size:13px}.music-message:empty{display:none}
.music-message a{color:inherit}
.music-video{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.music-video[hidden]{display:none}
.music-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.music-source{width:100%}
.music-credits{margin-top:8px;font-size:12px;color:var(--game-ui-muted)}
.music-credits summary{cursor:pointer;min-height:32px;display:flex;align-items:center}
.music-credits ol{margin:6px 0 0;padding-left:20px;display:grid;gap:4px}
.music-credits a{color:inherit}
.music-vibes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.music-menu .music-vibe{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;gap:2px;padding:8px 10px;min-width:0}
.music-vibe strong{font-size:13px}
.music-vibe span{font-size:11px;opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.music-link{display:flex;gap:8px}
.music-link input{flex:1;min-width:0;min-height:44px;padding:8px 10px;border:2px solid var(--game-frame);border-radius:0;background:var(--game-ground);color:var(--game-ui-ink)}
.music-menu .music-expand{display:none}
.music-menu.mini{top:auto;width:min(320px,calc(100vw - 32px))}
.music-menu.mini .music-expand{display:inline-flex}
.music-menu.mini .music-body{padding:8px 10px 10px;gap:8px}
.music-menu.mini .music-body>section:not(.music-controls),.music-menu.mini .music-volume{display:none}
@media(max-width:600px){
 .music-menu{top:auto;left:8px;right:8px;bottom:8px;width:auto;max-height:min(78dvh,640px)}
 /* Keep the iframe mounted offscreen; the office rail's Music Menu button reopens it. */
 .music-menu.mini{position:fixed;left:-10000px;right:auto;top:0;bottom:auto;width:320px;max-height:none;clip-path:inset(50%);pointer-events:none}
}
@media(max-height:500px) and (orientation:landscape){.music-menu{top:8px;bottom:8px;max-height:none}}

@media(min-width:601px){
 .layout-editing .music-menu{bottom:var(--music-edit-bottom,160px)}
}