/* Browser Source */
body { background: transparent; }
#room { position: absolute; width: 100vw; height: calc(100vw / 16 * 9); top: 0; left: 0; overflow: hidden; background-size: cover; background-repeat: round; }
#room > * { position: absolute; top: 0; }
/* Login Page */
#login { opacity: 0; transition: 0.5s all; width: 100%; height: 100%; }
#room:hover #login { opacity: 1; }
/* Login Alert */
@keyframes alert-disappear {
    from { opacity: 1 }
    50% { opacity: 1 }
    to { opacity: 0 }
}
#login-alert {
    animation: alert-disappear 10s forwards;
    position: absolute;
    top: 8px;
    left: 16px;
    color: black;
}
/* Controller Body */
body.controller { background: var(--background); }
body:not(.controller) .main { display: none; }
body.controller .main, body.controller .body { pointer-events: none !important; }
body.controller .main > *, body.controller .body > * { pointer-events: all; }
body.controller #room { width: calc(100vw - 128px); height: calc((100vw - 128px) / 16 * 9); top: calc(64px + 118px); left: 64px; }
/* On-screen Objects */
.object { position: absolute; width: 0; height: 0; }
.object.controlled, .object.controlled .object-inner { transition: none !important; }
.object img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; }
body.hidenametag .nametag { opacity: 0; }
.inactive, [class*="-wrapper"]:has(> .inactive) { pointer-events: none; --o: transparent; }
#ghost-select {
    border: 4px dotted orange;
}
#ghost-preview { opacity: 0.5; }