.ruleta-body {
  font-family: var(--font-sans);
}

button:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

@media (orientation: landscape) and (max-height: 540px) {
  .ruleta-top { padding: var(--s-2) var(--gutter); }
  .ruleta-top__logo { height: 32px; }
}

@media (max-width: 380px) {
  .lead-form__field input { height: 56px; }
  .lead-form__submit { height: 64px; font-size: var(--fs-xl); }
  .result__again { height: 56px; }
}

@media (max-height: 720px) and (orientation: portrait) {
  .ruleta-top { padding: var(--s-2) var(--gutter); }
  .ruleta-top__logo { height: 28px; }
  .screen { padding: var(--s-2) var(--gutter) var(--s-4); }
  .screen__title { font-size: var(--fs-3xl); line-height: 1; }
  .screen__inner { gap: var(--s-3); }
  .lead-form { gap: var(--s-3); }
  .lead-form__label { font-size: var(--fs-sm); }
  .lead-form__field input { height: 52px; font-size: var(--fs-md); }
  .lead-form__submit { margin-top: var(--s-2); height: 60px; font-size: var(--fs-xl); }
  .lead-form__msg { min-height: 1.2em; }
}

@media (min-width: 1280px) and (min-height: 900px) {
  .screen--lead .screen__inner {
    max-width: 560px;
    padding: var(--s-7) var(--s-6);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
  }
  .screen--wheel .wheel-stage {
    width: min(60vmin, 720px);
  }
  .screen--result .screen__inner--result {
    max-width: 720px;
  }
  .result__title {
    font-size: clamp(var(--fs-4xl), 5vw, var(--fs-5xl));
  }
}