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