.media-player{position:relative;width:100%;height:100%;min-height:220px;background:#000;isolation:isolate;overflow:hidden;color:var(--text)}
.media-player[data-fullscreen="true"],.media-player[data-live="false"]{position:fixed;inset:0;width:100vw;height:100dvh;z-index:30;min-height:0}
.media-video{width:100%;height:100%;display:block;object-fit:contain;background:#000;outline-offset:-6px!important}
.media-video:focus-visible{outline:1.5px solid color-mix(in srgb,var(--focus) 45%,transparent)}
/* The immersive picture owns remote input without outlining the entire screen.
   Buttons, sliders and menu choices keep their own visible focus indicators. */
.media-player[data-fullscreen="true"],.media-player[data-fullscreen="true"] .media-video{border:0;border-radius:0;outline:none;box-shadow:none}
.media-player[data-fullscreen="true"] .media-video{outline-offset:0!important}
.media-player[data-fullscreen="true"][data-cursor-hidden="true"],.media-player[data-fullscreen="true"][data-cursor-hidden="true"] *{cursor:none}
.media-radio-art{position:absolute;left:50%;top:45%;width:min(25vw,220px);height:auto;transform:translate(-50%,-50%);z-index:1;pointer-events:none}
.audio-only .media-video{opacity:0}
.media-status{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);max-width:80%;padding:1rem 1.5rem;background:var(--fs-solid);border:1px solid var(--fs-border);border-radius:var(--radius-control);font-size:1rem;text-align:center;z-index:3;margin:0}
.media-status[hidden],.media-recovery button[hidden]{display:none!important}
.media-recovery{position:absolute;top:54%;left:50%;transform:translateX(-50%);display:flex;gap:1rem;z-index:4}
.media-error{color:var(--danger)}
.media-transport{position:absolute;left:50%;bottom:3vh;transform:translateX(-50%);width:min(1120px,92vw);border-radius:var(--radius-panel);padding:18px 21px;display:flex;align-items:center;flex-wrap:wrap;gap:12px;z-index:2;transition:opacity 180ms ease}
.media-title{font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.media-clock{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.8rem}
.media-actions{display:flex;justify-content:center;align-items:center;gap:12px;width:100%}
.media-progress{flex-basis:100%;width:100%;height:var(--target);margin:0;cursor:pointer;accent-color:var(--accent)}
.media-player[data-controls="false"] .media-transport{opacity:0;pointer-events:none}
.media-player[data-live="true"] .media-transport{display:none}
.media-menu .control,.media-choices .control{width:100%;justify-content:flex-start;margin:0 0 12px;text-align:left;white-space:normal}
.media-menu .close-button,.media-choices .close-button{width:auto;justify-content:center;margin:0;text-align:center}
.player-root[inert] .media-transport{opacity:0;pointer-events:none}
.media-menu-number{font:600 1.5rem/1 ui-monospace,monospace;color:#5cff63;margin:0 0 18px}
.media-timing{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;border-top:1px solid var(--fs-border);padding-top:20px}
.media-timing h3,.media-timing output{width:100%;margin:0}
.media-timing[hidden]{display:none}
body:has(.media-player[data-fullscreen="true"]) {overflow:hidden}
.modal-shade{z-index:60}
@media(max-width:600px){.media-actions{gap:6px;flex-wrap:wrap}.media-actions .control{font-size:.8rem;min-height:44px}.media-transport{padding:12px;gap:8px}.media-status{max-width:90%;width:max-content;font-size:.85rem}.media-clock{font-size:.75rem}}
@media(min-width:2600px){.media-transport{width:min(1800px,90vw);padding:28px 34px;gap:20px}}