:root {
  /* Standaard voor Companion Milo en Titanium: Chrome-weergave rond 75%. */
  --smart-display-reference-scale: 0.75;
  --smart-display-virtual-width: 133.333333vw;
  --smart-display-virtual-height: 133.333333vh;
  --smart-display-virtual-dynamic-height: 133.333333dvh;
}

html[data-smart-display-model="portable"] {
  --smart-display-reference-scale: 0.8;
  --smart-display-virtual-width: 125vw;
  --smart-display-virtual-height: 125vh;
  --smart-display-virtual-dynamic-height: 125dvh;
}

html[data-smart-display-model="companion-2027"] {
  --smart-display-reference-scale: 0.9;
  --smart-display-virtual-width: 111.111111vw;
  --smart-display-virtual-height: 111.111111vh;
  --smart-display-virtual-dynamic-height: 111.111111dvh;
}

html[data-display-profile="smart-display"]:not([data-smart-display-layout="portrait"]) {
  zoom: var(--smart-display-reference-scale);
}

/* Houd de paginabackground minstens schermvullend na de profielzoom. */
html[data-display-profile="smart-display"]:not([data-smart-display-layout="portrait"]) body {
  min-height: var(--smart-display-virtual-height);
}

/* De game gebruikt viewport-eenheden voor zijn 16:9-speelvlak. */
html[data-display-profile="smart-display"]:not([data-smart-display-layout="portrait"]) .game-page {
  --game-frame-width: min(
    1180px,
    calc(var(--smart-display-virtual-width) - 24px),
    calc((var(--smart-display-virtual-dynamic-height) - 76px) * 16 / 9)
  );
  min-height: var(--smart-display-virtual-dynamic-height);
}

.smart-display-profile-debug {
  position: fixed;
  z-index: 2147483647;
  right: 12px;
  bottom: 12px;
  max-width: calc(100vw - 24px);
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(9, 10, 12, 0.88);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
  color: #fff;
  font: 600 12px/1.25 system-ui, sans-serif;
  letter-spacing: 0.01em;
  pointer-events: none;
}