*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

#app { min-height: 100dvh; display: flex; flex-direction: column; max-width: 960px; margin: 0 auto; }

button, input, a { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; touch-action: manipulation; }
button:disabled { cursor: default; }
:focus-visible { outline: 4px solid var(--sky); outline-offset: 3px; }

.ic { width: 24px; height: 24px; flex-shrink: 0; }

[lang='ar'] { font-family: var(--font-ar); font-weight: 700; line-height: 1.2; }

.screen { flex: 1; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--gap); }
.screen--center { align-items: center; justify-content: center; text-align: center; max-width: 440px; width: 100%; margin: 0 auto; }

.brand { margin: 0; font-size: 44px; font-weight: 800; letter-spacing: -0.5px; color: var(--teal-ink); }
.brand span { color: var(--coral); }
.title { margin: 0; font-size: 28px; font-weight: 800; }
.lead { margin: 0; color: var(--ink-soft); font-size: 18px; }
.lead--center { text-align: center; }
.hint { margin: 0; color: var(--ink-soft); font-size: 15px; }
.hint--center { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .balloon { animation-duration: 12s !important; }
}