/* tourney.css — DIRECT ACTION Tournaments (list + event page) and the Calendar (forked 2026-10-28 from the RV clan site's sheet).
   Tokens only. Each series has one data colour (--ser-*), used as a bar or swatch beside text, never as text on the dark ground:
   it is how the calendar legend, the event cards and the badges say which series. DIRECT ACTION is one series. The accent stays a fill. */

:root{
  --ser-da:#4c9df0;             /* DIRECT ACTION tournaments: blue (a data colour, never the accent) */
  --ser-clan:#eef2f6;           /* your clan's battles: white */
  --ser-match:#8b949e;          /* your clan's matches: grey */
  --ser-season:#c9d1d9;         /* season dates */
}
[data-ser="da"]{--c:var(--ser-da)}
[data-ser="clan-battle"]{--c:var(--ser-clan)} [data-ser="clan-match"]{--c:var(--ser-match)} [data-ser="season"]{--c:var(--ser-season)}

/* the preview strip (sample data only; the live API never sends sample:true) */
.tn-sample{display:flex;align-items:center;gap:var(--rv-s-3);padding:var(--rv-s-3) var(--rv-s-4);margin-bottom:var(--rv-s-6);background:var(--rv-warning-weak);border:1px solid var(--rv-warning);color:var(--rv-text-strong);font-size:var(--rv-fs-small)}
.tn-sample b{font-family:var(--cb-font-display);font-size:var(--rv-fs-h3);text-transform:uppercase;letter-spacing:var(--cb-track-wide)}

.tn-sec + .tn-sec{margin-top:var(--rv-s-8)}
.tn-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--rv-s-3);margin-bottom:var(--rv-s-4)}
.tn-h{margin:0;font-family:var(--cb-font-display);font-size:var(--rv-fs-h1);font-weight:800;text-transform:uppercase;letter-spacing:var(--cb-track-wide);color:var(--rv-text-strong)}
.tn-sub{margin:var(--rv-s-1) 0 0;font-size:var(--rv-fs-small);color:var(--rv-text-dim);max-width:72ch}

/* the series badge: a colour bar and the series' name */
.tn-ser{display:inline-flex;align-items:center;gap:var(--rv-s-2);font-family:var(--cb-font-display);font-size:var(--rv-fs-small);font-weight:700;text-transform:uppercase;letter-spacing:var(--cb-track-wide);color:var(--rv-text-strong)}
.tn-ser::before{content:"";width:var(--rv-s-1);height:1.1em;background:var(--c)}
.tn-meta{display:flex;flex-wrap:wrap;gap:var(--rv-s-1) var(--rv-s-4);font-size:var(--rv-fs-small);color:var(--rv-text)}
.tn-meta span{display:inline-flex;align-items:center;gap:var(--rv-s-1)}
.tn-meta .cb-icon{color:var(--rv-text-dim)}

/* ── the featured event: the game's own art, the event, the countdown, the way in ── */
.tn-feat{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr);min-height:360px;background:var(--rv-surface-1);border:1px solid var(--rv-border-1);border-top:3px solid var(--c);overflow:hidden}
.tn-feat__art{position:relative;min-height:240px}
.tn-feat__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tn-feat__art::after{content:"";position:absolute;inset:0;background:var(--rv-scrim)}
.tn-feat__copy{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;gap:var(--rv-s-3);padding:var(--rv-s-6)}
.tn-feat__name{margin:0;font-family:var(--cb-font-display);font-size:var(--cb-fs-hero);font-weight:800;line-height:.95;text-transform:uppercase;letter-spacing:var(--cb-track-tight);color:var(--rv-text-strong)}
.tn-feat__tag{margin:0;font-size:var(--rv-fs-body);color:var(--rv-text-strong);max-width:56ch}
.tn-feat__side{display:flex;flex-direction:column;gap:var(--rv-s-5);padding:var(--rv-s-6);border-left:1px solid var(--rv-border-1)}
.tn-label{font-size:var(--rv-fs-micro);font-weight:700;text-transform:uppercase;letter-spacing:var(--cb-track-wide);color:var(--rv-text-dim)}
.tn-count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--rv-s-2)}
.tn-count__u{display:flex;flex-direction:column;align-items:center;padding:var(--rv-s-3) var(--rv-s-1);background:var(--rv-surface-2);border:1px solid var(--rv-border-1)}
.tn-count__n{font-family:var(--cb-font-display);font-size:var(--cb-fs-big);font-weight:800;line-height:1;color:var(--rv-text-strong);font-variant-numeric:tabular-nums}
.tn-count__l{margin-top:var(--rv-s-1);font-size:var(--rv-fs-micro);text-transform:uppercase;letter-spacing:var(--cb-track-wide);color:var(--rv-text-dim)}
.tn-slots{display:flex;flex-direction:column;gap:var(--rv-s-2)}
.tn-slots__row{display:flex;justify-content:space-between;font-size:var(--rv-fs-small);color:var(--rv-text)}
.tn-slots__row b{color:var(--rv-text-strong);font-variant-numeric:tabular-nums}
.tn-bar{height:var(--rv-s-2);background:var(--rv-surface-3);border:1px solid var(--rv-border-1)}
.tn-bar > i{display:block;height:100%;background:var(--rv-accent)}
.tn-cta{display:flex;flex-wrap:wrap;gap:var(--rv-s-2);margin-top:auto}
.tn-cta .cb-btn{flex:1 1 auto;justify-content:center}
.tn-note{margin:0;font-size:var(--rv-fs-small);color:var(--rv-text-dim)}

/* ── the schedule: one card per month, in order ── */
.tn-sched{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--rv-s-3)}
.tn-card{position:relative;display:flex;flex-direction:column;background:var(--rv-surface-1);border:1px solid var(--rv-border-1);border-top:3px solid var(--c);color:inherit;text-decoration:none;transition:border-color 120ms}
.tn-card:hover{border-color:var(--rv-border-2);border-top-color:var(--c)}
.tn-card:focus-visible{outline:2px solid var(--rv-focus);outline-offset:2px}
.tn-card__art{position:relative;height:110px;overflow:hidden}
.tn-card__art img{width:100%;height:100%;object-fit:cover;display:block}
.tn-card__art::after{content:"";position:absolute;inset:0;background:var(--rv-scrim)}
.tn-card__month{position:absolute;left:var(--rv-s-4);bottom:var(--rv-s-3);z-index:1;font-family:var(--cb-font-display);font-size:var(--rv-fs-display);font-weight:800;line-height:1;text-transform:uppercase;color:var(--rv-text-strong)}
.tn-card__month small{display:block;font-size:var(--rv-fs-small);font-weight:600;letter-spacing:var(--cb-track-wide);color:var(--rv-text)}
.tn-card__body{display:flex;flex-direction:column;gap:var(--rv-s-2);padding:var(--rv-s-4);flex:1 1 auto}
.tn-card__name{margin:0;font-family:var(--cb-font-display);font-size:var(--rv-fs-h2);font-weight:700;color:var(--rv-text-strong)}
.tn-card__foot{margin-top:auto;padding-top:var(--rv-s-3);border-top:1px solid var(--rv-border-1);display:flex;flex-wrap:wrap;gap:var(--rv-s-2);align-items:center;justify-content:space-between}

/* ── champions ── */
.tn-champs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--rv-s-3)}
.tn-champ{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--rv-s-1) var(--rv-s-4);align-items:center;padding:var(--rv-s-4);background:var(--rv-surface-1);border:1px solid var(--rv-border-1);border-left:3px solid var(--c);color:inherit;text-decoration:none}
.tn-champ:hover{border-color:var(--rv-border-2);border-left-color:var(--c)}
.tn-champ__trophy{grid-row:1 / 4;width:var(--rv-s-7);height:var(--rv-s-7);display:grid;place-items:center;background:var(--rv-surface-3);border:1px solid var(--rv-border-2)}
.tn-champ__trophy .cb-icon{width:var(--rv-s-5);height:var(--rv-s-5);color:var(--rv-accent-contrast)}
.tn-champ__who{font-family:var(--cb-font-display);font-size:var(--rv-fs-h2);font-weight:800;color:var(--rv-text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tn-champ__ev{font-size:var(--rv-fs-small);color:var(--rv-text)}
.tn-champ__d{font-size:var(--rv-fs-micro);color:var(--rv-text-dim);text-transform:uppercase;letter-spacing:var(--cb-track-wide)}
.tn-tag{font-family:var(--cb-font-mono);font-size:.8em;color:var(--rv-text-dim);margin-right:var(--rv-s-1)}

/* ── how it works ── */
.tn-how{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--rv-s-3);counter-reset:how}
.tn-how li{counter-increment:how;display:flex;flex-direction:column;gap:var(--rv-s-2);padding:var(--rv-s-5) var(--rv-s-4) var(--rv-s-4);background:var(--rv-surface-1);border:1px solid var(--rv-border-1)}
.tn-how li::before{content:counter(how,decimal-leading-zero);font-family:var(--cb-font-display);font-size:var(--cb-fs-stat);font-weight:800;line-height:1;color:var(--rv-text-faint)}
.tn-how b{font-family:var(--cb-font-display);font-size:var(--rv-fs-h3);text-transform:uppercase;letter-spacing:var(--cb-track-wide);color:var(--rv-text-strong)}
.tn-how span{font-size:var(--rv-fs-small);color:var(--rv-text);line-height:1.55}

/* ── the event page ── */
.tn-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--rv-s-2);margin-bottom:var(--rv-s-6)}
.tn-fact{display:flex;flex-direction:column;gap:var(--rv-s-1);padding:var(--rv-s-3) var(--rv-s-4);background:var(--rv-surface-1);border:1px solid var(--rv-border-1)}
.tn-fact b{font-family:var(--cb-font-display);font-size:var(--rv-fs-h2);font-weight:700;color:var(--rv-text-strong)}
.tn-two{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:var(--rv-s-5);align-items:start}
.tn-box{padding:var(--rv-s-5);background:var(--rv-surface-1);border:1px solid var(--rv-border-1)}
.tn-box + .tn-box{margin-top:var(--rv-s-4)}
.tn-box h3{margin:0 0 var(--rv-s-3);font-family:var(--cb-font-display);font-size:var(--rv-fs-h3);font-weight:700;text-transform:uppercase;letter-spacing:var(--cb-track-wide);color:var(--rv-text-strong)}
.tn-list{margin:0;padding-left:var(--rv-s-5);display:flex;flex-direction:column;gap:var(--rv-s-2);font-size:var(--rv-fs-small);color:var(--rv-text);line-height:1.55;max-width:72ch}
.tn-time{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tn-time li{display:grid;grid-template-columns:var(--rv-s-4) minmax(0,1fr);gap:var(--rv-s-3);padding-bottom:var(--rv-s-4);position:relative}
.tn-time li::before{content:"";width:var(--rv-s-3);height:var(--rv-s-3);margin-top:var(--rv-s-1);border:2px solid var(--rv-border-2);background:var(--rv-surface-1)}
.tn-time li.is-past::before{background:var(--rv-text-dim);border-color:var(--rv-text-dim)}
.tn-time li:not(:last-child)::after{content:"";position:absolute;left:calc(var(--rv-s-3) / 2 - 1px);top:calc(var(--rv-s-4) + var(--rv-s-1));bottom:0;width:2px;background:var(--rv-border-1)}
.tn-time b{display:block;font-size:var(--rv-fs-small);color:var(--rv-text-strong)}
.tn-time span{font-size:var(--rv-fs-small);color:var(--rv-text-dim)}
.tn-teams{width:100%;border-collapse:collapse;font-size:var(--rv-fs-small)}
.tn-teams th{text-align:left;padding:var(--rv-s-2) var(--rv-s-3);font-size:var(--rv-fs-micro);text-transform:uppercase;letter-spacing:var(--cb-track-wide);color:var(--rv-text-dim);border-bottom:1px solid var(--rv-border-1)}
.tn-teams td{padding:var(--rv-s-2) var(--rv-s-3);border-bottom:1px solid var(--rv-hairline);color:var(--rv-text)}
.tn-teams td.n{font-variant-numeric:tabular-nums;text-align:right}
.tn-teams th.n{text-align:right}
.tn-teams b{color:var(--rv-text-strong)}
.tn-fa{display:flex;flex-wrap:wrap;gap:var(--rv-s-2)}

/* ── the bracket: one column per round; the box scrolls sideways, the page never does ── */
.bk-wrap{overflow-x:auto;padding-bottom:var(--rv-s-3)}
.bk-sec + .bk-sec{margin-top:var(--rv-s-6)}
.bk-sec__h{margin:0 0 var(--rv-s-3);font-family:var(--cb-font-display);font-size:var(--rv-fs-h2);font-weight:800;text-transform:uppercase;letter-spacing:var(--cb-track-wide);color:var(--rv-text-strong)}
.bk{display:flex;gap:var(--rv-s-6);min-width:min-content}
.bk-col{display:flex;flex-direction:column;width:230px;flex:0 0 auto}
.bk-col__h{display:flex;flex-direction:column;gap:2px;padding-bottom:var(--rv-s-2);margin-bottom:var(--rv-s-3);border-bottom:2px solid var(--rv-border-1)}
.bk-col__h b{font-family:var(--cb-font-display);font-size:var(--rv-fs-h3);text-transform:uppercase;letter-spacing:var(--cb-track-wide);color:var(--rv-text-strong)}
.bk-col__h span{font-size:var(--rv-fs-micro);color:var(--rv-text-dim)}
.bk-col__m{display:flex;flex-direction:column;justify-content:space-around;flex:1 1 auto;gap:var(--rv-s-3)}
.bk-m{position:relative;background:var(--rv-surface-1);border:1px solid var(--rv-border-1)}
.bk-m--ready{border-color:var(--rv-border-2)}
.bk-m--bye,.bk-m--void{opacity:.55}
.bk-m__id{position:absolute;right:var(--rv-s-2);top:calc(-1 * var(--rv-s-2));padding:0 var(--rv-s-1);background:var(--rv-bg);font-family:var(--cb-font-mono);font-size:var(--rv-fs-nano);color:var(--rv-text-faint)}
.bk-t{display:grid;grid-template-columns:var(--rv-s-5) minmax(0,1fr) auto;align-items:center;gap:var(--rv-s-2);min-height:calc(var(--rv-s-6) + 2px);padding:0 var(--rv-s-2) 0 0;font-size:var(--rv-fs-small);color:var(--rv-text-dim)}
.bk-t + .bk-t{border-top:1px solid var(--rv-hairline)}
.bk-t__seed{align-self:stretch;display:grid;place-items:center;background:var(--rv-surface-2);font-family:var(--cb-font-mono);font-size:var(--rv-fs-micro);color:var(--rv-text-dim)}
.bk-t__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-t__sc{font-family:var(--cb-font-display);font-size:var(--rv-fs-h3);font-weight:700;font-variant-numeric:tabular-nums;color:var(--rv-text-dim);min-width:2ch;text-align:right}
.bk-t--win{color:var(--rv-text-strong);background:var(--rv-surface-3)}
.bk-t--win .bk-t__seed{background:var(--rv-accent);color:#fff}
.bk-t--win .bk-t__sc{color:var(--rv-text-strong)}
.bk-t--tbd{font-style:italic;color:var(--rv-text-faint)}
.bk-champ{display:flex;align-items:center;gap:var(--rv-s-4);padding:var(--rv-s-4) var(--rv-s-5);margin-bottom:var(--rv-s-5);background:var(--rv-surface-1);border:1px solid var(--rv-border-1);border-left:3px solid var(--rv-accent)}
.bk-champ .cb-icon{width:var(--rv-s-6);height:var(--rv-s-6);color:var(--rv-accent-contrast)}
.bk-champ b{display:block;font-family:var(--cb-font-display);font-size:var(--rv-fs-h1);font-weight:800;color:var(--rv-text-strong)}
.bk-champ span{font-size:var(--rv-fs-small);color:var(--rv-text-dim);text-transform:uppercase;letter-spacing:var(--cb-track-wide)}
.bk-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--rv-s-4)}
.bk-group{background:var(--rv-surface-1);border:1px solid var(--rv-border-1)}
.bk-group h4{margin:0;padding:var(--rv-s-3) var(--rv-s-4);font-family:var(--cb-font-display);font-size:var(--rv-fs-h3);text-transform:uppercase;letter-spacing:var(--cb-track-wide);color:var(--rv-text-strong);border-bottom:1px solid var(--rv-border-1)}
.bk-group .tn-teams tr.is-in td:first-child{box-shadow:inset 3px 0 0 var(--rv-accent)}
.bk-group details{border-top:1px solid var(--rv-border-1)}
.bk-group summary{padding:var(--rv-s-2) var(--rv-s-4);cursor:pointer;font-size:var(--rv-fs-small);color:var(--rv-text)}
.bk-gm{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--rv-s-2);padding:var(--rv-s-1) var(--rv-s-4);font-size:var(--rv-fs-small);color:var(--rv-text-dim)}
.bk-gm b{color:var(--rv-text-strong);font-weight:600}
.bk-gm span:last-child{text-align:right}
.bk-gm em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--rv-text-strong)}
.bk-empty{padding:var(--rv-s-6);text-align:center;background:var(--rv-surface-1);border:1px dashed var(--rv-border-2)}
.bk-empty b{display:block;font-family:var(--cb-font-display);font-size:var(--rv-fs-h2);color:var(--rv-text-strong);margin-bottom:var(--rv-s-1)}
.bk-empty span{font-size:var(--rv-fs-small);color:var(--rv-text-dim)}

@media (max-width:959px){
  .tn-feat{grid-template-columns:1fr}
  .tn-feat__art{min-height:300px}
  .tn-feat__side{border-left:0;border-top:1px solid var(--rv-border-1)}
  .tn-how{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tn-two{grid-template-columns:1fr}
}
@media (max-width:559px){
  .tn-feat__copy,.tn-feat__side{padding:var(--rv-s-4)}
  .tn-count__n{font-size:var(--cb-fs-stat)}
  .tn-how{grid-template-columns:1fr}
}

/* ── staff tools (RV admins only; tourney-staff.js): the window, the event form, the staff bar, a match's Result button ── */
.tn-dlg{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:var(--rv-s-5);background:var(--rv-scrim)}
.tn-dlg[hidden]{display:none}
.tn-dlg__box{width:min(720px,100%);max-height:100%;display:flex;flex-direction:column;background:var(--rv-surface-1);border:1px solid var(--rv-border-2);border-top:3px solid var(--rv-accent)}
.tn-dlg__head{display:flex;align-items:center;justify-content:space-between;gap:var(--rv-s-3);padding:var(--rv-s-4) var(--rv-s-5);border-bottom:1px solid var(--rv-border-1)}
.tn-dlg__head h2{margin:0;font-family:var(--cb-font-display);font-size:var(--rv-fs-h1);font-weight:800;text-transform:uppercase;letter-spacing:var(--cb-track-wide);color:var(--rv-text-strong)}
.tn-dlg__body{overflow-y:auto;padding:var(--rv-s-5)}
.tn-dlg__foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--rv-s-2);padding:var(--rv-s-4) var(--rv-s-5);border-top:1px solid var(--rv-border-1)}
.tn-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--rv-s-4)}
.tn-form .cb-field + .cb-field{margin-top:0}
.tn-form .tn-wide{grid-column:1 / -1}
.tn-form .cb-hint{margin:0}
.tn-err{margin:0 0 var(--rv-s-4);padding:var(--rv-s-2) var(--rv-s-3);background:var(--rv-danger-weak);border:1px solid var(--rv-danger);color:var(--rv-text-strong);font-size:var(--rv-fs-small)}
.tn-err[hidden]{display:none}
.tn-staff{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rv-s-2);padding:var(--rv-s-3) var(--rv-s-4);margin-bottom:var(--rv-s-5);background:var(--rv-surface-1);border:1px dashed var(--rv-border-2)}
.tn-staff__t{margin-right:auto;font-size:var(--rv-fs-micro);font-weight:700;text-transform:uppercase;letter-spacing:var(--cb-track-wide);color:var(--rv-text-dim)}
.tn-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--rv-s-1) var(--rv-s-3)}
.tn-picks label{display:flex;align-items:center;gap:var(--rv-s-2);font-size:var(--rv-fs-small);color:var(--rv-text)}
.bk-rec{all:unset;box-sizing:border-box;display:block;width:100%;padding:var(--rv-s-1) var(--rv-s-2);border-top:1px solid var(--rv-hairline);font-size:var(--rv-fs-micro);font-weight:700;text-transform:uppercase;letter-spacing:var(--cb-track-wide);color:var(--rv-text-dim);text-align:center;cursor:pointer}
.bk-rec:hover{color:var(--rv-text-strong);background:var(--rv-surface-2)}
.bk-rec:focus-visible{outline:2px solid var(--rv-focus)}
@media (max-width:559px){.tn-form{grid-template-columns:1fr}}

/* ── Media (sc-media.js): the gallery cards, the player window ── */
.md-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--rv-s-3)}
.md-card{display:flex;flex-direction:column;background:var(--rv-surface-1);border:1px solid var(--rv-border-1);min-width:0}
.md-card:hover{border-color:var(--rv-border-2)}
.md-card__media{all:unset;box-sizing:border-box;position:relative;display:block;aspect-ratio:16 / 9;background:var(--rv-bg);cursor:pointer;overflow:hidden}
.md-card__media:focus-visible{outline:2px solid var(--rv-focus);outline-offset:-2px}
.md-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.md-card__ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--rv-s-2);color:var(--rv-text-dim);font-size:var(--rv-fs-small)}
.md-card__ph .cb-icon{width:var(--rv-s-6);height:var(--rv-s-6)}
.md-card__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--rv-s-7);height:var(--rv-s-7);display:grid;place-items:center;background:var(--rv-accent);color:#fff}
.md-card__play .cb-icon{width:var(--rv-s-5);height:var(--rv-s-5);color:#fff}
.md-card__flag{position:absolute;left:var(--rv-s-2);top:var(--rv-s-2)}
.md-card__body{display:flex;flex-direction:column;gap:var(--rv-s-1);padding:var(--rv-s-3)}
.md-card__t{font-size:var(--rv-fs-body);color:var(--rv-text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md-card__m{font-size:var(--rv-fs-micro);color:var(--rv-text-dim)}
.md-card__acts{display:flex;flex-wrap:wrap;gap:var(--rv-s-1);margin-top:var(--rv-s-2)}
.md-dlg__wide{width:min(1100px,100%)}
.md-stage{background:#000;aspect-ratio:16 / 9;max-height:72vh;display:grid;place-items:center}
.md-stage iframe{width:100%;height:100%;border:0;display:block}
.md-stage img{max-width:100%;max-height:72vh;display:block}