html, body { height: 100%; margin: 0; padding: 0; background: #000 url('bg-tile.jpg') center top / 100% auto no-repeat; overflow: hidden; }
#unity-container { position: absolute; }
#unity-container.unity-desktop {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(100vw, calc(100vh * 1920 / 1180));
  aspect-ratio: 1920 / 1180;
  background: #000;
}
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100%; background: #000; }
/* Game screen over the TV's screen cutout (percent of the TV image). Nudge these 4 values if alignment is off. */
#unity-canvas { position: absolute; left: 3.6%; top: 9.6%; width: 72.7%; height: 81.9%; background: #000; display: block; border-radius: 4%; }
.unity-mobile #unity-canvas { position: static; left: 0; top: 0; width: 100%; height: 100%; border-radius: 0; }
#unity-loading-bar { position: absolute; left: 40%; top: 50%; transform: translate(-50%, -50%); display: none; z-index: 10; }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
#unity-footer { display: none }
#unity-warning { position: absolute; left: 40%; top: 12%; transform: translate(-50%); background: white; padding: 10px; display: none }

/* Transparent TV frame drawn on TOP of the game. pointer-events:none lets clicks/keys reach the game. */
#tv-frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('frame.png') center center / 100% 100% no-repeat; pointer-events: none; z-index: 5; }
.unity-mobile #tv-frame { display: none; }

/* Cable/port graphic overlaid on TOP of the TV. Its right-side ports line up with the TV's left stubs; the rest runs off-screen left. */
/* Nudge left/top/width (percent of the game stage) if the ports drift out of alignment. */
#tv-ports { position: absolute; left: -26%; top: 53.1%; width: 35%; height: auto; pointer-events: none; z-index: 6; }
.unity-mobile #tv-ports { display: none; }

/* Clickable TV buttons drawn on TOP of the frame. pointer-events:auto so they receive clicks (frame is none). */
/* Positioned by top-left corner as percent of the game stage. full-screen 129x76 @ (1586,710); power-io 79x76 @ (1750,710). */
#tv-fullscreen, #tv-power { position: absolute; top: 60.17%; height: 6.44%; pointer-events: auto; z-index: 7; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; cursor: pointer; }
#tv-fullscreen { left: 82.6%; width: 6.72%; background-image: url('full-screen.png'); }
#tv-fullscreen:hover, #tv-fullscreen:active { background-image: url('full-screen-hover.png'); }
#tv-power { left: 91.15%; width: 4.11%; background-image: url('power-io.png'); }
#tv-power:hover, #tv-power:active { background-image: url('power-io-hover.png'); }
.unity-mobile #tv-fullscreen, .unity-mobile #tv-power { display: none; }