/* App shell and screen frame: flat warm paper, no decoration. */

.app-shell {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  background: var(--paper);
}

.screen {
  width: min(100%, 480px);
  min-height: 100dvh;
  padding: var(--safe-top) var(--gutter) var(--safe-bottom);
  position: relative;
}

.app-version {
  margin-top: var(--space-4);
  padding-bottom: 2px;
  color: var(--muted);
  text-align: center;
  font-size: var(--text-caption);
  font-weight: 500;
}

@media (max-width: 350px) {
  .screen {
    --gutter: 16px;
  }
}

@media (max-height: 760px) {
  .app-version {
    margin-top: var(--space-2);
  }
}

@media (min-width: 700px) {
  .screen {
    min-height: 820px;
    margin: 32px 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }

  .game-screen {
    min-height: max(680px, calc(100dvh - 64px));
  }
}