html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #9bbac1; }
body { font-family: Arial, Helvetica, sans-serif; color: #f6f5e7; }
#world, #world canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
#world { cursor: none; }
#loading, #failure { position: absolute; left: 0; right: 0; top: 42%; text-align: center; padding: 24px; }
#loading { -webkit-transition: opacity 1.2s; transition: opacity 1.2s; pointer-events: none; }
#loading.finished { opacity: 0; }
#loading h1 { font-size: 52px; font-weight: bold; letter-spacing: 8px; text-transform: uppercase; margin: 0 0 14px; }
#loading p { font-size: 18px; letter-spacing: 1.5px; margin: 0; }
#loading { color: #fffdf0; text-shadow: 0 2px 4px #294b46; }
@media (max-width: 600px) {
    #loading h1 { font-size: 32px; letter-spacing: 4px; }
    #loading p { font-size: 14px; letter-spacing: 0.5px; }
}
h1 { font-size: 22px; font-weight: normal; letter-spacing: 7px; margin: 16px 0; }
p { font-size: 14px; line-height: 1.6; letter-spacing: 1px; }
#failure { display: none; background: #203b44; }
#failure h1 { letter-spacing: 1px; }
.no-script { position: absolute; top: 40%; width: 100%; text-align: center; }

#scene-controls { position: fixed; top: 12px; right: 12px; z-index: 6; white-space: nowrap; }
.scene-button { position: relative; display: inline-block; vertical-align: top; width: 44px; height: 44px; padding: 9px; margin: 0 0 0 4px; border: 1px solid rgba(255,255,255,0.45); border-radius: 7px; background: rgba(25,43,46,0.65); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.scene-button svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scene-button:hover, .scene-button:active { background: #29464b; }
.scene-button:focus { outline: 2px solid #fff5c3; outline-offset: 2px; }
.fullscreen-exit, .is-fullscreen .fullscreen-enter { display: none; }
.is-fullscreen .fullscreen-exit { display: block; }
.speed-button { padding-top: 3px; }
.speed-button svg { height: 24px; }
#speed-value { position: absolute; bottom: 3px; left: 0; width: 100%; font: bold 11px Arial, sans-serif; text-align: center; }

/* Scale the entire standard RCWeb panel, preserving its frame and labels. */
#qrPanel { position: fixed; bottom: 12px; right: 12px; z-index: 5; width: 166px; opacity: 0.5; -webkit-transform: scale(0.375); transform: scale(0.375); -webkit-transform-origin: bottom right; transform-origin: bottom right; }
@media (max-width: 600px), (max-width: 960px) and (max-height: 600px) {
    #scene-controls { top: 8px; right: 8px; }
    #qrPanel { bottom: 8px; right: 8px; -webkit-transform: scale(0.4); transform: scale(0.4); }
}

.rcRoomQrCodeLink {
    display: block;
    width: 150px;
    margin-left: auto;
    margin-right: auto;
    border: solid 8px #fff;
    border-radius: 8px;
    color: #fff;
    background-color: #fff;
    box-shadow: 0 0 0 1px #fff;
    text-align: center;
    -webkit-transition: opacity 1s ease;
    transition: opacity 1s ease;
    text-decoration: none;
    box-shadow: 0 0 32px #000;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.rcTechLabel {
    background-color: #000;
    color: #fff;
    font-family: monospace;
    font-size: 13px;
    font-weight: bold;
    margin: 0 0 8px 0;
    padding: 4px;
    letter-spacing: 0.2em;
    border-radius: 8px 8px 0 0;
}

.rcRoomQrCode {
    width: 150px;
    height: 150px;
}

.rcRoomId {
    background-color: #000;
    color: #fff;
    font-family: monospace;
    font-size: 16px;
    padding: 4px;
    margin: 8px 0 0 0;
    letter-spacing: 0.25em;
    border-radius: 0 0 8px 8px;
}