:root {
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
}

body {
  font-family: var(--font-family-base);
  color: var(--color-text-light);
  background:
    radial-gradient(circle at 85% 10%, rgba(138, 63, 252, 0.26), transparent 38%),
    radial-gradient(circle at 16% 86%, rgba(255, 106, 0, 0.2), transparent 42%),
    linear-gradient(155deg, #0f1330 0%, #0a0f24 58%, #140f24 100%),
    var(--color-bg-main);
}

#app-root {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  padding: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

.app-shell {
  width: min(100%, 430px);
  height: min(calc(100dvh - 48px), 844px);
  min-height: min(720px, calc(100dvh - 48px));
  max-height: 844px;
  background: var(--color-surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  container-type: inline-size;
}

#screen-root {
  width: 100%;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

#screen-root > .screen {
  flex: 1;
  min-height: 0;
}

.app-shell:has(.app-screen) {
  padding: 0;
  overflow: hidden;
}

.screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.screen__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

@media (max-width: 480px) {
  #app-root {
    min-height: 100dvh;
    padding: 0;
  }

  .app-shell {
    width: 100%;
    min-height: 100dvh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border-color: rgba(255, 255, 255, 0.04);
    padding:
      max(var(--space-6), var(--app-safe-top))
      max(var(--space-4), var(--app-safe-right))
      max(var(--space-6), var(--app-safe-bottom))
      max(var(--space-4), var(--app-safe-left));
  }

  .app-shell:has(.app-screen) {
    padding: 0;
    padding-bottom: var(--app-safe-bottom);
    min-height: 100dvh;
  }
}