.stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: #000;
  transform-origin: 0 0;
  font-family: "Segoe UI", system-ui, sans-serif;
}
.stage [hidden] { display: none !important; }
.st-cams, .st-cam { position: absolute; inset: 0; }
.st-cam {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  opacity: 0;
  transition: opacity 0.2s linear;
}
.st-cam.on { opacity: 1; }
.st-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #56657a;
  font-size: 48px;
}

.ov { position: absolute; z-index: 5; }
.ov[data-pos^="t"] { top: 40px; }
.ov[data-pos^="b"] { bottom: 40px; }
.ov[data-pos$="l"] { left: 40px; }
.ov[data-pos$="r"] { right: 40px; }
.ov[data-pos$="c"] { left: 50%; transform: translateX(-50%); }

.st-frame { overflow: hidden; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); }
.st-frame iframe { border: 0; display: block; background: transparent; transform-origin: 0 0; }

.st-board {
  --s: 1;
  --accent: #ff2d55;
  font-size: calc(30px * var(--s));
  color: #fff;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
}
.bd-row { display: flex; align-items: stretch; font-weight: 700; line-height: 1; }
.bd-name {
  background: rgba(8, 12, 20, 0.88);
  padding: 0.45em 0.75em;
  min-width: 5.5em;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.bd-a { text-align: right; border-radius: 0.25em 0 0 0.25em; }
.bd-b { text-align: left; border-radius: 0 0.25em 0.25em 0; }
.bd-score {
  background: var(--accent);
  padding: 0.45em 0.55em;
  min-width: 1.9em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.bd-sa { box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.35); }
.bd-label {
  background: rgba(8, 12, 20, 0.88);
  color: #d7e1ee;
  font-size: 0.6em;
  font-weight: 600;
  text-align: center;
  padding: 0.35em 0.8em;
  margin: 0 auto;
  width: max-content;
  border-radius: 0 0 0.3em 0.3em;
}