/* A draggable floating card with the map itself showing through its frame. */
#app[data-preview="true"] #player-shell {
 width:min(620px,calc(100% - 76px)); right:52px;
 background:#0d111450; border-color:#ffffff36; isolation:isolate;
 backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
 box-shadow:0 16px 48px #00000033;
}
#app[data-preview="true"] .preview-place p,#app[data-preview="true"] #map-selected-solar { color:#ffffffb3; }
#app[data-preview="true"] .preview-header button { border-color:#ffffff40; }
.map-dot.is-selected:not(.is-cluster) .map-point { fill:#f6fcff; stroke:#f6fcff; stroke-width:1.5; filter:drop-shadow(0 0 5px #d9f4ff99); }
#app[data-preview="true"] #player-shell.preview-floating {
 left:var(--preview-left); top:var(--preview-top); right:auto; bottom:auto;
 width:min(620px,calc(100% - 76px));
}
#app[data-preview="true"] .preview-footer { flex-wrap:nowrap; }
#app[data-preview="true"] .preview-footer>div:first-child { flex:1; min-width:0; }
#app[data-preview="true"] #preview-theme { max-width:100%; }
#app[data-preview="true"] .preview-header button { cursor:pointer; }
#app[data-preview="true"] .preview-header { cursor:grab; touch-action:none; user-select:none; }
#app[data-preview="true"] .preview-place:focus-visible { outline:1px solid #ffffffb3; outline-offset:5px; border-radius:3px; }
#app[data-preview="true"] #player-shell.preview-dragging .preview-header { cursor:grabbing; }
#app[data-preview="true"] #player-shell.preview-dragging .camera-media { pointer-events:none; }
#app[data-preview="true"] :is(#preview-expand,#preview-close) { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:0; background:transparent; color:#e9edeb; box-shadow:none; }
#app[data-preview="true"] :is(#preview-expand,#preview-close):hover { color:#fff; background:transparent; }
#app[data-preview="true"] :is(#preview-expand,#preview-close):focus-visible { outline:1px solid #fff; outline-offset:-4px; }
#preview-expand svg,#preview-close svg { flex:none; width:20px; height:20px; overflow:visible; }
:is(#preview-expand,#main-reduce) .expand-triangle-ne { animation:expand-ne-breathe 3s ease-in-out infinite; }
:is(#preview-expand,#main-reduce) .expand-triangle-sw { animation:expand-sw-breathe 3s ease-in-out infinite; }
@keyframes expand-ne-breathe { 0%,100% { transform:translate(-1px,1px); } 70% { transform:translate(1px,-1px); } }
@keyframes expand-sw-breathe { 0%,100% { transform:translate(1px,-1px); } 70% { transform:translate(-1px,1px); } }
:is(#preview-expand,#main-reduce):is(:hover,:focus-visible) path { animation:none; }
@media(prefers-reduced-motion:reduce) { :is(#preview-expand,#main-reduce) :is(.expand-triangle-ne,.expand-triangle-sw) { animation:none; } }
#app[data-preview="true"] #player-shell.preview-compact #cam-frame-wrap {
 min-height:min(100px,var(--preview-media-cap)); max-height:var(--preview-media-cap);
}
@media(max-width:680px){
 #app[data-preview="true"] #player-shell.preview-floating { width:calc(100% - 54px); }
 #app[data-preview="true"] .map-zoom { left:auto; right:12px; top:auto; bottom:82px; }
}
@media(max-height:600px) and (min-width:681px){
 #app[data-preview="true"] #player-shell.preview-floating { width:min(470px,calc(100% - 76px)); }
}