/* ==========================================================================
   Ajustes de toque e telas pequenas que não cabem nos CSS de página.
   ========================================================================== */

/* Safe area de aparelhos com notch */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    .navbar { padding-top: env(safe-area-inset-top); }

    .music-toggle,
    .pwa-install,
    .pwa-hint { bottom: max(var(--s-4), env(safe-area-inset-bottom)); }
}

@media (hover: none) and (pointer: coarse) {
    /* Alvo mínimo de toque */
    .btn,
    .cta-button,
    .btn-share,
    .nav-link,
    .remove-question-btn,
    .toast-close {
        min-height: 44px;
    }

    .nav-link,
    .toast-close { display: inline-flex; align-items: center; }

    /* Sem hover em touch: o preenchimento do botão só atrapalha */
    .btn:hover::before,
    .cta-button:hover::before { transform: scaleY(0); }

    .btn:active::before,
    .cta-button:active::before { transform: scaleY(1); }

    /* A pilha de cartas não tem hover — deixa no estado aberto */
    .quiz-card--back  { transform: rotate(-6deg) translateX(-20px); }
    .quiz-card--mid   { transform: rotate(4deg) translateX(18px); }
}

/* iOS dá zoom em campo com fonte menor que 16px */
@media (max-width: 760px) {
    .form-input,
    .link-input,
    input[type="text"],
    input[type="url"],
    input[type="email"],
    textarea,
    select {
        font-size: 16px;
    }
}

/* Telas muito estreitas */
@media (max-width: 380px) {
    :root { --s-8: 3rem; --s-9: 4rem; --s-10: 5rem; }
    .play-sheet { padding: var(--s-5) var(--s-3); }
}