/* One translated application window keeps the media, controls and map together. */
html[data-theme] #world #cinema #cinema-view[data-player-draggable="true"]{
 translate:var(--player-drag-x,0px) var(--player-drag-y,0px);
}
html[data-theme] #world #cinema #cinema-view[data-player-draggable="true"] .cinema-titlebar{
 cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
html[data-theme] #world #cinema #cinema-view[data-player-draggable="true"] .cinema-titlebar :is(button,a){cursor:pointer;touch-action:manipulation}
html[data-theme] #world #cinema #cinema-view[data-player-draggable="true"] .cinema-titlebar:focus-visible{outline:2px solid #417caf;outline-offset:-3px}
html[data-theme] #world #cinema #cinema-view.player-is-dragging .cinema-titlebar{cursor:grabbing}
html[data-theme] body.cinema-expanded #world #cinema #cinema-view[data-player-draggable="true"]{translate:none}
html[data-theme] body.cinema-expanded #world #cinema #cinema-view[data-player-draggable="true"] .cinema-titlebar{cursor:default}

html[data-theme] #world #cinema #cinema-view{max-width:min(100vw,var(--player-work-width,100vw));box-sizing:border-box}
html[data-theme] #world #cinema .cinema-titlebar{box-sizing:border-box;max-width:100%;min-width:0}
html[data-theme] #world #cinema .player-window-buttons{flex:none}
/* One control size per input mode: a lone enlarged minimise control breaks the bar. */
html[data-theme] #world #cinema .player-window-buttons button{width:34px;min-width:34px;height:31px;min-height:31px;padding:0;display:grid;place-items:center;box-sizing:border-box}
@media(pointer:coarse){html[data-theme] #world #cinema .player-window-buttons button{width:44px;min-width:44px;height:44px;min-height:44px}}

/* The cinema workspace uses the browser width, including on large desktops.
   Otherwise the inherited 1440px page clip cuts off a correctly dragged pane. */
html[data-theme] #world[data-page="cinema"]{width:100%;max-width:none}
/* Clamp the visible player, not an empty full-width grid surrounding it. */
html[data-theme] body:not(.cinema-expanded) #world #cinema #cinema-view{width:calc(var(--player-width,900px) + 32px);margin-inline:auto}
html[data-theme] body:not(.cinema-expanded) #world #cinema #cinema-view.player-wide.player-with-location{width:calc(var(--player-width,900px) + 278px)}
@media(max-width:620px){html[data-theme] body:not(.cinema-expanded) #world #cinema #cinema-view{width:calc(var(--player-width,900px) + 16px)}}

@media(pointer:coarse){html[data-theme] #world #cinema .cinema-titlebar{min-height:52px;height:auto}}

html[data-theme] #world #cinema #cinema-view[data-player-narrow-viewport="true"]{grid-template-columns:minmax(0,calc(var(--player-work-width) - 16px));padding-inline:8px}
html[data-theme] #world #cinema #cinema-view[data-player-narrow-viewport="true"] .cinema-titlebar{justify-content:center;padding-inline:4px}
html[data-theme] #world #cinema #cinema-view[data-player-narrow-viewport="true"] :is(.player-app,#memory-kind){display:none}

/* A minimised player stays above the dock, leaving every dock action reachable. */
html[data-theme] #minimised-player{bottom:var(--mini-dock-bottom,78px)}
/* Home music notices and the deck must also leave the dock/mini player clear. */
html[data-theme] #world>:is(.radio-first-play,.sound-deck){bottom:var(--dock-overlay-bottom,78px);max-height:max(48px,calc(100dvh - var(--dock-overlay-bottom,78px) - 8px))}
html[data-theme] #world:has(>.sound-deck:not([hidden]))>.radio-first-play{display:none}