:root {
  --burr-button-font: "DM Sans", "Trebuchet MS", "Segoe UI", sans-serif;
  --burr-button-primary-size: clamp(.96rem, 4.4vw, 1.12rem);
  --burr-button-secondary-size: .86rem;
}

/* Burrquizzz button typography system.
   Home CTAs are the source of truth. Screen-specific selectors below are
   intentionally stronger than legacy rules in setup/results stylesheets. */
button:not(.brand) {
  font-family: var(--burr-button-font) !important;
  font-style: normal !important;
  font-optical-sizing: auto;
}

button:not(.brand) * {
  font-family: inherit !important;
}

/* PRIMARY ACTIONS = Home "Começar partida" */
.primary-button,
#screen-solo-setup .primary-button,
#screen-online-menu .primary-button,
#screen-lobby .primary-button,
#screen-game .primary-button,
#screen-results .primary-button,
dialog .primary-button,
.real-home__cta strong {
  font-family: var(--burr-button-font) !important;
  font-size: var(--burr-button-primary-size) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: .02em !important;
}

#screen-solo-setup .primary-button,
#screen-online-menu .primary-button,
#screen-lobby .primary-button,
#screen-game .primary-button,
#screen-results .primary-button,
dialog .primary-button {
  text-transform: uppercase !important;
}

/* SECONDARY ACTIONS = Home "Duelo online".
   Keep their existing transparent/outlined visual treatment; only the text
   hierarchy changes here. */
.secondary-button,
#screen-online-menu .secondary-button,
#screen-results .ghost-button,
.ghost-button:not(.small),
.back-link,
.real-home__online strong {
  font-family: var(--burr-button-font) !important;
  font-size: var(--burr-button-secondary-size) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: .02em !important;
}

.secondary-button,
#screen-online-menu .secondary-button,
#screen-results .ghost-button,
.ghost-button:not(.small),
.back-link {
  text-transform: uppercase !important;
}

/* Small utility controls stay compact but use the same face. */
.ghost-button.small,
.dialog-close,
.profile-photo-link {
  font-family: var(--burr-button-font) !important;
  font-weight: 800 !important;
}

/* Answer choices keep sentence casing while sharing the same typography. */
.answer-button,
#screen-game .answer-button {
  font-family: var(--burr-button-font) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: .01em !important;
}

/* Segmented choices behave visually like buttons. */
.segmented span,
#screen-solo-setup .segmented span {
  font-family: var(--burr-button-font) !important;
  font-weight: 800 !important;
}

/* Home supporting copy remains intentionally lighter. */
.real-home__cta small,
.real-home__online small {
  font-family: var(--burr-button-font) !important;
  font-weight: 500 !important;
}

/* v1.2 mobile layout guard -------------------------------------------------
   Legacy setup/game styles contain ID-based overflow and minimum-height rules.
   These stronger mobile overrides prevent content from being clipped at the
   bottom of real phone viewports. */
@media (max-width: 680px) {
  #screen-solo-setup.active,
  #screen-online-menu.active {
    min-height: 0 !important;
    height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
  }

  #screen-solo-setup.active::-webkit-scrollbar,
  #screen-online-menu.active::-webkit-scrollbar,
  #screen-game.active::-webkit-scrollbar {
    display: none;
  }

  #screen-solo-setup .panel.compact,
  #screen-online-menu .panel.compact {
    margin-top: 6px !important;
    padding: 22px 18px 20px !important;
  }

  #screen-solo-setup h2,
  #screen-online-menu h2 {
    margin-bottom: 20px !important;
  }

  #screen-solo-setup .field,
  #screen-online-menu .field {
    margin-bottom: 14px !important;
  }

  #screen-online-menu .online-actions {
    gap: 12px !important;
  }

  #screen-solo-setup input,
  #screen-online-menu input {
    height: 52px !important;
  }

  #screen-solo-setup .primary-button,
  #screen-online-menu .primary-button,
  #screen-online-menu .secondary-button {
    min-height: 52px !important;
  }

  #screen-game.active {
    min-height: 0 !important;
    height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
  }

  #screen-game.active .question-card {
    min-height: 0 !important;
  }

  #screen-game.active .question-image-wrap {
    margin-bottom: 9px !important;
  }

  #screen-game.active .question-image-wrap img {
    width: 100% !important;
    height: auto !important;
    max-height: min(23dvh, 175px) !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    background: #06131a;
  }

  #screen-game.active .answers-stack {
    gap: 6px !important;
  }

  #screen-game.active .answer-button {
    min-height: 48px !important;
    padding-block: 7px !important;
  }
}

@media (max-width: 680px) and (max-height: 800px) {
  #screen-solo-setup.active,
  #screen-online-menu.active {
    padding-top: 12px !important;
  }

  #screen-solo-setup .back-link,
  #screen-online-menu .back-link {
    min-height: 38px !important;
  }

  #screen-solo-setup .panel.compact,
  #screen-online-menu .panel.compact {
    padding: 18px 16px 18px !important;
  }

  #screen-solo-setup h2,
  #screen-online-menu h2 {
    margin-bottom: 16px !important;
    font-size: clamp(2rem, 9.5vw, 2.55rem) !important;
  }

  #screen-solo-setup .field,
  #screen-online-menu .field {
    margin-bottom: 12px !important;
  }

  #screen-online-menu .online-actions {
    gap: 10px !important;
  }

  #screen-solo-setup input,
  #screen-online-menu input,
  #screen-solo-setup .primary-button,
  #screen-online-menu .primary-button,
  #screen-online-menu .secondary-button {
    height: 50px !important;
    min-height: 50px !important;
  }

  #screen-game.active .question-image-wrap img {
    max-height: min(21dvh, 155px) !important;
  }
}