/* Large laptops */
@media (max-width: 1366px) {
  .question-title {
    max-width: none;
  }

  .answer-btn {
    min-height: 76px;
    padding: var(--space-sm) var(--space-md);
  }

  .answer-btn--tf {
    min-height: 100px;
  }
}

/* Tablets landscape / smaller desktops */
@media (max-width: 1100px) {
  .answer-grid--tf {
    grid-template-columns: 1fr;
  }

  .cta-btn {
    min-width: min(100%, 420px);
    min-height: 80px;
  }

  .question-main {
    gap: var(--space-md);
  }
}

/* Short viewports */
@media (max-height: 800px) {
  .screen__inner {
    padding-block: var(--space-md);
    min-height: auto;
  }

  .idle-fact {
    min-height: auto;
    padding: var(--space-md);
  }

  .idle-hero {
    gap: var(--space-md);
    padding-block: var(--space-sm);
  }

  .question-layout,
  .idle-layout {
    gap: var(--space-md);
  }

  .feedback-card,
  .result-card {
    gap: var(--space-md);
    padding: var(--space-lg);
  }
}

/* Phones + tablets: keep natural document scrolling */
@media (max-width: 1024px) {
  html,
  body {
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #app {
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
  }

  .screen,
  .screen.is-active {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100%;
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
  }

  .screen.is-active {
    display: block !important;
  }

  .screen__inner {
    min-height: auto;
    height: auto;
    overflow: visible;
    padding: var(--space-md);
    padding-bottom: max(
      var(--space-xxl),
      calc(env(safe-area-inset-bottom, 0px) + 32px)
    );
    padding-top: max(var(--space-md), env(safe-area-inset-top, 0px));
  }

  .idle-layout {
    gap: var(--space-md);
    min-height: auto;
  }

  .idle-hero {
    flex: 0 1 auto;
    justify-content: flex-start;
    gap: var(--space-md);
    padding-block: var(--space-sm);
  }

  .idle-hero__title {
    font-size: clamp(2.2rem, 10vw, 3.2rem);
  }

  .idle-hero__subtitle {
    font-size: clamp(1.25rem, 5vw, 1.8rem);
  }

  .idle-actions {
    width: 100%;
    margin-block: var(--space-sm);
  }

  .idle-fact {
    min-height: auto;
    width: 100%;
    padding: var(--space-md);
  }

  .idle-fact__text {
    font-size: clamp(1.05rem, 3.8vw, 1.35rem);
  }

  .cta-btn {
    width: 100%;
    min-width: 0;
    min-height: 72px;
    font-size: clamp(1.2rem, 4.5vw, 1.6rem);
    border-radius: var(--radius-md);
  }

  .question-layout {
    gap: var(--space-md);
    min-height: auto;
  }

  .question-top__meta {
    gap: var(--space-xs);
  }

  .meta-chip {
    flex: 1;
    justify-content: center;
    min-height: 40px;
    font-size: var(--font-size-xs);
    padding-inline: var(--space-sm);
  }

  .question-title {
    font-size: clamp(1.35rem, 5.5vw, 2rem);
    max-width: none;
  }

  .answer-grid {
    gap: var(--space-sm);
  }

  .answer-btn {
    min-height: 72px;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    /* Keep taps responsive without blocking page pan */
    touch-action: manipulation;
  }

  .answer-btn--tf {
    min-height: 88px;
  }

  .answer-btn__marker {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-sm);
  }

  .answer-btn__label {
    font-size: clamp(1rem, 3.8vw, 1.25rem);
  }

  .feedback-layout,
  .result-layout,
  .error-layout {
    align-items: start;
    padding-block: var(--space-md);
    min-height: auto;
  }

  .feedback-card,
  .result-card,
  .error-card {
    width: 100%;
    padding: var(--space-lg);
    gap: var(--space-md);
    border-radius: var(--radius-md);
  }

  .feedback-icon {
    width: 72px;
    height: 72px;
    font-size: 2.25rem;
  }

  .feedback-status,
  .result-card__title {
    font-size: clamp(1.5rem, 6vw, 2.25rem);
  }

  .result-card__score {
    font-size: clamp(3rem, 14vw, 4.5rem);
  }

  .ambient__shape--one {
    width: 55vw;
    height: 55vw;
  }

  .ambient__shape--two {
    width: 40vw;
    height: 40vw;
  }

  .ambient__shape--three {
    width: 22vw;
    height: 22vw;
  }
}

/* Phones */
@media (max-width: 600px) {
  .question-top__meta {
    flex-direction: row;
    align-items: stretch;
  }

  .meta-chip {
    flex: 1;
  }

  .type-badge {
    min-height: 34px;
    font-size: 0.8rem;
  }

  .question-bottom__label {
    font-size: 0.8rem;
  }

  .progress__track {
    height: 8px;
  }

  .feedback-correct-block {
    padding: var(--space-md);
  }

  .feedback-correct-block__value {
    font-size: clamp(1.05rem, 4.5vw, 1.35rem);
  }

  .feedback-explanation {
    font-size: clamp(0.95rem, 3.8vw, 1.15rem);
  }
}

/* Small phones */
@media (max-width: 380px) {
  .screen__inner {
    padding-inline: var(--space-sm);
  }

  .idle-hero__title {
    font-size: 2.1rem;
  }

  .cta-btn {
    min-height: 64px;
  }

  .answer-btn {
    min-height: 68px;
    gap: var(--space-sm);
  }
}

/* Tablet landscape */
@media (min-width: 601px) and (max-width: 1100px) and (orientation: landscape) {
  .answer-grid--tf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .question-title {
    font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  }
}