/* The page on a stage (see stage.js): desktop Discord (a 1920 x 1080 stage
   scaled to the Activity frame and letterboxed) and phones on the website and
   in Discord (the app's layout at the app's scale). Only active under
   html.staged; the #stage and #stage-viewport wrappers are created by the script. */

html.staged {
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* The letterbox: the root's background covers the whole frame. */
  background: #000;
}

html.staged body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: none;
}

html.staged #stage {
  position: fixed;
  top: 50%;
  left: 50%;
  width: var(--stage-w, 1920px);
  height: var(--stage-h, 1080px);
  transform: translate(-50%, -50%) scale(var(--stage-scale, 1));
  transform-origin: 50% 50%;
  overflow: hidden;
  background: var(--space);
}

/* Stands in for the page's scroll area. Separate from #stage, which is
   transformed and so the containing block of every fixed layer (the arena, the
   boot screen, notices): a containing block that scrolled would drag them along. */
html.staged #stage-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden auto;
}

/* Phones: the app's layout (html.is-app, tokens.css). The camera cutout's insets
   are screen pixels; on the stage they are that many divided by its scale. */
html.staged-phone.is-app {
  --cutout-left: calc(env(safe-area-inset-left, 0px) / 2 / var(--stage-scale, 1));
  --cutout-right: calc(env(safe-area-inset-right, 0px) / 2 / var(--stage-scale, 1));
}

/* Modal dialogs are drawn outside the stage, in the top layer: scaled like it. */
html.staged dialog { zoom: var(--stage-scale, 1); }

/* Phones are played sideways, like the app: held upright, this card covers the page. */
.stage-rotate { display: none; }
html.staged-phone.stage-portrait .stage-rotate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  background: var(--space);
  color: var(--ink);
  text-align: center;
}
html.staged-phone.stage-portrait #stage { visibility: hidden; }
.stage-rotate strong { font-family: var(--font-display); font-size: 20px; letter-spacing: 2px; }
.stage-rotate span { font-size: 15px; color: #93a9b8; }
/* A phone outline that tips over onto its side. */
.stage-rotate i {
  width: 34px;
  height: 58px;
  margin-bottom: 14px;
  border: 2px solid var(--cyan);
  border-radius: 7px;
  animation: stage-rotate 2.4s ease-in-out infinite;
}
@keyframes stage-rotate { 0%, 25% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) { .stage-rotate i { animation: none; transform: rotate(-90deg); } }