/* The player's glass: black, no cursor, the stage and the pairing screen. */
html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #000; overflow: hidden; }
body { cursor: none; font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #fff; }
[hidden] { display: none !important; }

#stage { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; overflow: hidden; background: #000; }
.st-view { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }
.st-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; }
.st-layer.st-front { opacity: 1; z-index: 2; }
.st-layer.st-back { opacity: 0; z-index: 1; }
.st-layer.st-fade { transition: opacity 0.4s linear; }
.st-item { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background: #000; }
.st-item.st-front { z-index: 2; }
.st-black { background: #000; }
.st-image, .st-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.st-frame { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.st-zone { position: absolute; overflow: hidden; }

.st-message { display: flex; align-items: center; justify-content: center; text-align: center; }
.st-message-text { padding: 0 4%; font-weight: 600; line-height: 1.2; word-wrap: break-word; }
.st-ticker .st-message-text { position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 0; line-height: 1; will-change: transform; }
.st-ticker { display: block; }

#connect {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #0b1a33; text-align: center;
}
#connect .st-title { font-size: 4vmin; opacity: 0.85; margin-bottom: 3vmin; }
#connect .st-code-label, #connect .st-server-label { font-size: 2.6vmin; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.2em; }
#connect .st-code { font-size: 18vmin; font-weight: 700; letter-spacing: 0.18em; font-family: "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; margin: 1vmin 0 4vmin; }
#connect .st-server { font-size: 3.4vmin; margin: 0.5vmin 0 4vmin; word-break: break-all; }
#connect .st-hint { font-size: 2.6vmin; max-width: 70%; opacity: 0.8; }
#connect .st-status { font-size: 2.4vmin; margin-top: 2vmin; opacity: 0.6; }
#connect .st-version { position: absolute; right: 2vmin; bottom: 2vmin; font-size: 1.8vmin; opacity: 0.4; }