html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #522d6d;
  cursor: none;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #fff;
}

.stage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #522d6d;
  object-fit: cover;
}

.stage.is-hidden { visibility: hidden; }

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #522d6d;
  background-image:
    radial-gradient(circle at 10% 16%, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.07) 12vmin, transparent 12.2vmin),
    radial-gradient(circle at 92% 88%, rgba(255, 255, 255, 0.06) 0, rgba(255, 255, 255, 0.06) 22vmin, transparent 22.2vmin);
}

.overlay[hidden], .view[hidden], .notice[hidden] { display: none; }

.overlay-logo {
  width: 70vmin;
  max-width: 95%;
  height: auto;
  margin: -12vmin 0 -10vmin;
}

.view { padding: 0 6vw; }

.pairing-code {
  margin: 0;
  display: inline-block;
  padding: 1.5vmin 4vmin 1.5vmin 5.4vmin;
  font-size: 17vmin;
  font-weight: 800;
  letter-spacing: 1.4vmin;
  line-height: 1.1;
  color: #522d6d;
  background: #fff6ea;
  border-radius: 6vmin;
  box-shadow: 0 1.2vmin 0 #2f1a40;
}

.pairing-instruction {
  margin: 5vmin 0 0;
  font-size: 4vmin;
  line-height: 1.35;
  color: #e9dcf2;
}

.idle-title {
  margin: 0;
  font-size: 9vmin;
  font-weight: 800;
}

.idle-screen-name {
  margin: 2vmin 0 0;
  font-size: 5vmin;
  color: #d4bde4;
}

.notice {
  position: fixed;
  margin: 0;
  padding: 1vmin 2.4vmin;
  font-size: 2.4vmin;
  border-radius: 4vmin;
  background: rgba(47, 26, 64, 0.82);
  color: #e9dcf2;
}

.notice-offline { left: 3vmin; bottom: 3vmin; }
.notice-hint { right: 3vmin; bottom: 3vmin; }