/* B51 game demo (owner 05.11.2026, _research/DEMOS.md). Hand-written, not touched by fork_css.py. Classes mv-*, hooks data-mx-demo*. */
.mv-demo{margin-top:8px;min-width:0}
.mv-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.mv-tab{border:1px solid var(--mx-line-hi);background:var(--mx-panel);color:var(--mx-ink-2);font:500 14px/1 var(--mx-text);padding:10px 18px;border-radius:var(--mx-r-pill);cursor:pointer}
.mv-tab:hover{color:var(--mx-ink);border-color:var(--mx-acc)}
.mv-tab[aria-selected="true"]{background:var(--mx-acc);border-color:var(--mx-acc);color:var(--mx-on-acc)}
.mv-tab:focus-visible,.mv-play:focus-visible,.mv-full:focus-visible{outline:2px solid var(--mx-ink);outline-offset:2px}
.mv-panes{min-width:0}
.mv-pane[hidden]{display:none}
.mv-stage{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;background:var(--mx-well);border:1px solid var(--mx-line);border-radius:var(--mx-r-card)}
.mv-img,.mv-frame{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.mv-img{object-fit:cover;object-position:var(--mv-focus,50%) center}
.mv-play{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;padding:20px;border:0;cursor:pointer;color:var(--mx-ink);
  background:linear-gradient(0deg,rgba(20,20,21,.78),rgba(20,20,21,.12) 55%,rgba(20,20,21,.35))}
.mv-play[hidden]{display:none}
.mv-badge{position:absolute;top:12px;left:12px;padding:6px 12px;border-radius:var(--mx-r-pill);background:var(--mx-deep);border:1px solid var(--mx-acc);color:var(--mx-acc-hi);font:600 12px/1 var(--mx-text);letter-spacing:.05em;text-transform:uppercase}
.mv-cta{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:var(--mx-r-btn);background:var(--mx-go);color:var(--mx-on-go);font:700 17px/1 var(--mx-text)}
.mv-play:hover .mv-cta{background:var(--mx-go-hi)}
.mv-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:12px}
.mv-full{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:var(--mx-r-btn);border:1px solid var(--mx-line-hi);background:var(--mx-raise);color:var(--mx-ink);font:500 14px/1 var(--mx-text);cursor:pointer}
.mv-full:hover{border-color:var(--mx-acc)}
.mv-studio{margin:0;flex:1;min-width:0;font:400 13px/1.3 var(--mx-text);color:var(--mx-ink-3)}
.mv-bar .mv-go{margin-left:auto}
.mv-note{margin:12px 0 0;font:400 13.5px/1.45 var(--mx-text);color:var(--mx-ink-2)}
/* pseudo full screen for browsers without the Fullscreen API on frames (iPhone Safari) */
.mv-stage.mv-max{position:fixed;inset:0;z-index:9999;width:100vw;height:100dvh;aspect-ratio:auto;border-radius:0;border:0;background:#000000}
@media (max-width:600px){
  .mv-stage{aspect-ratio:4/5}
  .mv-tabs{flex-wrap:nowrap;overflow-x:auto;margin-right:-16px;padding-right:16px;scrollbar-width:none}
  .mv-tab{flex:0 0 auto}
  .mv-cta{padding:13px 22px;font-size:16px}
  .mv-bar .mv-go{margin-left:0;flex:1 1 100%}
  .mv-full{flex:1 1 auto;justify-content:center}
  .mv-studio{flex:1 1 100%;order:3}
}