/*
  Mobile / tablet layout + scroll
  - Document/body scrolls (reliable in DevTools + iOS/Android)
  - Comfortable spacing between header, question, answers, and progress
*/

@media (hover: none), (pointer: coarse), (max-width: 1200px) {
    html,
    body {
        width: 100% !important;
        height: auto !important;
        min-height: 100% !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: auto;
        touch-action: pan-y;
        -webkit-text-size-adjust: 100%;
        -webkit-overflow-scrolling: touch;
    }

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

    .ambient {
        position: fixed !important;
        inset: 0 !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }

    .screen {
        display: none !important;
    }

    /* Active screen flows with the document and can grow past the viewport */
    .screen.is-active {
        display: block !important;
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: 100dvh !important;
        overflow: visible !important;
        touch-action: pan-y !important;
        z-index: 1 !important;
        background: transparent;
    }

    #questionScreen.is-active,
    #feedbackScreen.is-active,
    #resultScreen.is-active {
        overflow: visible !important;
    }

    .screen__inner {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        max-width: 720px !important;
        min-height: auto !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: 18px 16px 48px !important;
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* ----- Question screen spacing ----- */
    .question-layout,
    .idle-layout,
    .feedback-layout,
    .error-layout,
    .question-main,
    .question-top,
    .question-bottom,
    .question-main__header,
    .idle-hero,
    .idle-actions {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        flex: none !important;
        transform: none !important;
    }

    /* Keep result card vertically/horizontally centered; back button stays on top */
    .result-layout {
        display: grid !important;
        grid-template-rows: auto 1fr !important;
        min-height: calc(100dvh - 96px) !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        flex: none !important;
        transform: none !important;
    }

    .result-layout__nav {
        justify-self: start !important;
        margin-bottom: 8px !important;
    }

    .result-layout .result-card {
        place-self: center !important;
    }

    .question-top {
        margin-bottom: 22px !important;
    }

    .question-top__nav {
        margin-bottom: 12px !important;
    }

    .back-btn {
        min-height: 44px !important;
        font-size: 0.95rem !important;
    }

    .question-top__meta {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
        justify-content: space-between;
        gap: 12px !important;
        margin-top: 14px;
    }

    .meta-chip {
        flex: 1 1 0;
        justify-content: center;
        min-height: 44px !important;
        padding: 8px 12px !important;
        font-size: 0.9rem !important;
        white-space: nowrap;
    }

    .question-main {
        margin-bottom: 28px !important;
    }

    .question-main__header {
        margin-bottom: 22px !important;
    }

    .type-badge {
        display: inline-flex !important;
        margin-bottom: 14px !important;
        min-height: 34px;
        font-size: 0.85rem;
    }

    .question-title {
        max-width: none !important;
        margin: 0 0 4px !important;
        font-size: clamp(1.25rem, 5.2vw, 1.7rem) !important;
        line-height: 1.45 !important;
    }

    .answer-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 4px 0 8px !important;
    }

    .answer-btn {
        width: 100% !important;
        min-height: 78px !important;
        margin: 0 !important;
        padding: 16px 16px !important;
        gap: 14px !important;
        box-sizing: border-box !important;
        touch-action: manipulation;
    }

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

    .answer-btn__marker {
        width: 42px !important;
        height: 42px !important;
        flex-shrink: 0;
    }

    .answer-btn__label {
        font-size: clamp(1rem, 3.8vw, 1.2rem) !important;
        line-height: 1.4 !important;
    }

    .question-bottom {
        margin-top: 12px !important;
        margin-bottom: 12px !important;
        padding-top: 12px !important;
    }

    .question-bottom__label {
        margin-bottom: 8px !important;
        font-size: 0.9rem !important;
    }

    .progress__track {
        height: 10px !important;
    }

    /* Idle: one centered column */
    .idle-screen.is-active {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        min-height: 100dvh !important;
    }

    .idle-shell {
        display: flex !important;
        flex-direction: column !important;
        direction: rtl !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 100dvh !important;
        height: auto !important;
        padding: 28px 16px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
        box-sizing: border-box !important;
    }

    .idle-panel {
        direction: rtl !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 16px !important;
        flex: none !important;
        width: min(100%, 640px) !important;
        min-width: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    .idle-hero__title {
        margin: 0 !important;
        font-size: clamp(2.4rem, 8vw, 4rem) !important;
        color: #0a5c63 !important;
        text-shadow: none !important;
    }

    .idle-hero__subtitle {
        margin: 0 !important;
        font-size: clamp(1.2rem, 3.5vw, 1.7rem) !important;
        color: #5a6b78 !important;
        text-shadow: none !important;
    }

    .idle-actions {
        margin: 4px 0 8px !important;
        width: 100% !important;
    }

    .cta-btn,
    .cta-btn--idle {
        width: 100% !important;
        min-height: 72px !important;
        touch-action: manipulation;
    }

    .idle-fact {
        width: 100% !important;
        margin: 0 !important;
        padding: 14px !important;
        min-height: auto !important;
        box-sizing: border-box;
        background: #ffffff !important;
    }

    /* Feedback / result */
    .feedback-layout,
    .error-layout {
        padding: 12px 0 24px !important;
    }

    .result-layout {
        padding: 8px 0 24px !important;
    }

    .feedback-card,
    .error-card {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 24px 18px !important;
        box-sizing: border-box;
    }

    .result-card {
        width: min(100%, 780px) !important;
        margin: 0 !important;
        padding: 24px 18px !important;
        box-sizing: border-box;
    }
}

@media (max-width: 600px) {
    .screen__inner {
        padding-inline: 14px !important;
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .question-top__meta {
        gap: 10px !important;
    }

    .meta-chip {
        font-size: 0.82rem !important;
        padding-inline: 8px !important;
    }

    .answer-grid {
        gap: 16px !important;
    }

    .answer-btn {
        min-height: 76px !important;
    }
}

/* Very short phones: keep readable spacing, rely on scroll */
@media (max-height: 700px) and (max-width: 1200px) {
    .question-title {
        font-size: clamp(1.15rem, 4.8vw, 1.45rem) !important;
    }

    .question-main__header {
        margin-bottom: 18px !important;
    }

    .answer-grid {
        gap: 14px !important;
    }
}