/* /R5/explode/media-modal.css v1 (2026-10-01)
   One windowed media viewer for every photo, clip, Short and Movie Magic link on /R5/explode/.
   Look borrowed from the R5 photo/video lightbox (.lb / .vm in /R5/assets/r5.css): #050509 stage,
   round .lb-btn controls, gold #d4af37 accents, sage caption rule. Not full screen: dimmed backdrop. */
.xm{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:5vh 5vw}
.xm[hidden]{display:none}
.xm-backdrop{position:absolute;inset:0;background:rgba(3,3,8,.78);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .18s ease}
.xm.is-open .xm-backdrop{opacity:1}
.xm-panel{position:relative;display:flex;flex-direction:column;width:max-content;min-width:min(480px,90vw);max-width:90vw;max-height:90vh;
  background:#050509;border:1px solid rgba(212,175,55,.28);border-radius:14px;box-shadow:0 18px 60px rgba(0,0,0,.65);overflow:hidden;
  transform:translateY(8px) scale(.985);opacity:0;transition:transform .18s ease,opacity .18s ease;touch-action:pan-y}
.xm.is-open .xm-panel{transform:none;opacity:1}
.xm-top{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;width:0;min-width:100%}
.xm-kind{color:#d4af37;font-family:"Courier New",monospace;font-size:.9em;letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
.xm-tools{margin-left:auto;display:flex;gap:8px;align-items:center;min-width:0}
.xm-btn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:#ddd;font-size:1.6em;line-height:1;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .2s;flex:0 0 auto;font-family:inherit}
.xm-btn:hover,.xm-btn:focus-visible{border-color:#d4af37;color:#d4af37}
.xm-btn:focus-visible,.xm-dl:focus-visible,.xm-ctx:focus-visible{outline:2px solid #d4af37;outline-offset:2px}
.xm-dl{color:#0a0a0f;background:linear-gradient(135deg,#d4af37,#b8941f);padding:8px 12px;border-radius:6px;font-weight:700;font-size:.8em;text-decoration:none;white-space:nowrap}
.xm-dl[hidden]{display:none}
.xm-stage{position:relative;display:flex;align-items:center;justify-content:center;background:#000;min-height:120px;flex:0 1 auto}
.xm-media{display:block;max-width:none;background:#000}
.xm-media.vfx{outline:2px solid #c8202f;outline-offset:-2px}
.xm-spin{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px;border-radius:50%;border:3px solid rgba(212,175,55,.2);border-top-color:#d4af37;animation:xmspin .8s linear infinite;display:none}
.xm-spin.on{display:block}
@keyframes xmspin{to{transform:rotate(360deg)}}
.xm-caption{width:0;min-width:100%;padding:12px 18px 14px;background:rgba(10,10,15,.92);border-top:1px solid rgba(123,155,123,.18);color:#bbb;font-size:.9em;line-height:1.5;max-height:22vh;overflow-y:auto;flex:0 0 auto}
.xm-caption .ct{color:#fff;font-weight:700;font-size:1.02em}
.xm-caption .cm{color:#7b9b7b;font-size:.85em;margin-left:8px;white-space:nowrap}
.xm-caption .cd{display:block;margin-top:4px}
.xm-caption .ch{display:block;color:#666;font-size:.8em;margin-top:4px}
.xm-caption .xm-pill{display:inline-block;padding:2px 9px;border-radius:50px;font-size:.72em;font-weight:700;letter-spacing:.5px;color:#d4af37;background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.4);margin-right:8px;vertical-align:2px}
.xm-caption .xm-pill.vfx{color:#fff;background:#c8202f;border-color:#c8202f;text-transform:uppercase}
.xm-ctx{display:inline-block;margin-top:6px;font-size:.85em;color:#d4af37;text-decoration:none;border-bottom:1px dotted rgba(212,175,55,.5)}
.xm-ctx[hidden]{display:none}
.xm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.xm-lock,html.xm-lock body{overflow:hidden}
html.xm-lock{scroll-behavior:auto}
/* openers */
.xm-zoomable{cursor:zoom-in}
.xm-zoomable:focus-visible{outline:2px solid #d4af37;outline-offset:3px}
.xm-short-btn{position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0;padding:0;margin:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}
.xm-short-btn::before{content:"";width:58px;height:58px;border-radius:50%;border:2px solid rgba(212,175,55,.85);background:rgba(8,8,16,.6);transition:transform .2s,background .2s}
.xm-short-btn::after{content:"";position:absolute;left:50%;top:50%;margin:-11px 0 0 -6px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #d4af37}
.xm-short-btn:hover::before,.xm-short-btn:focus-visible::before{transform:scale(1.08);background:rgba(8,8,16,.8)}
.xm-short-btn:focus-visible{outline:2px solid #d4af37;outline-offset:-4px;border-radius:14px}
/* phones: near-full-width sheet, a strip of backdrop stays visible, big close target */
@media (max-width:640px){
  .xm{padding:max(28px,env(safe-area-inset-top)) 8px max(20px,env(safe-area-inset-bottom))}
  .xm-panel{width:100%;min-width:0;max-width:100%;max-height:100%;border-radius:12px}
  .xm-top{padding:6px 6px 6px 14px;gap:8px}
  .xm-btn.xm-close{width:48px;height:48px;font-size:1.9em}
  .xm-dl{white-space:normal;line-height:1.25;text-align:center;padding:6px 10px;font-size:.74em}
  .xm-caption{padding:10px 14px 12px;font-size:.85em;max-height:26vh}
  .xm-grab{display:block;width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.22);margin:0 auto;position:absolute;left:50%;top:4px;transform:translateX(-50%)}
}
@media (min-width:641px){.xm-grab{display:none}}
@media (prefers-reduced-motion:reduce){.xm-backdrop,.xm-panel{transition:none}}