:root {
  color-scheme: dark;
  background: #030712;
}
* { box-sizing: border-box; }
html, body, .live-shell { width:100%; height:100%; margin:0; }
html, body { overflow:hidden; background:#030712; }
.live-shell { position:relative; isolation:isolate; }
.scoreboard-frame {
  display:block;
  border:0;
  background:#030712;
}

/* Desktop / TV: 4K is the broadcast master canvas.
   The iframe always has a real 3840x2160 viewport. The inner scoreboard
   renders its 1920x1080 logical composition at 2x, so typography and all
   vector UI are authored/rendered at 4K resolution. HD, Full HD, QHD and
   4K only scale the complete 4K master frame, never reflow it. */
body[data-layout="broadcast"] .scoreboard-frame {
  position:absolute;
  left:50%;
  top:50%;
  width:3840px;
  height:2160px;
  transform-origin:center center;
  transform:translate(-50%,-50%) scale(var(--broadcast-scale,1));
}

/* iPad / tablets and phones use their native viewport so the inner page
   can apply its dedicated responsive layout. */
body[data-layout="tablet"] .scoreboard-frame,
body[data-layout="mobile"] .scoreboard-frame {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform:none;
}

@media (prefers-reduced-motion: reduce) {
  .scoreboard-frame { transition:none !important; }
}