/* MathPulse - Ajustements responsive (mobile d'abord, les styles de base sont dans main.css) */

/* Encoche / barres système */
@supports (padding: max(0px)) {
    .screen {
        padding-top: max(var(--spacing-lg), env(safe-area-inset-top));
        padding-bottom: max(var(--spacing-lg), env(safe-area-inset-bottom));
        padding-left: max(var(--spacing-lg), env(safe-area-inset-left));
        padding-right: max(var(--spacing-lg), env(safe-area-inset-right));
    }
}

/* Petits écrans */
@media (max-width: 380px) {
    h1 { font-size: var(--font-size-2xl); }
    .question { font-size: var(--font-size-2xl); }
    .block { width: 1.3rem; height: 1.3rem; }
    .group-item { font-size: 1.2rem; }
    .btn-large { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
}

/* Paysage bas (téléphone tourné) */
@media (orientation: landscape) and (max-height: 520px) {
    .screen { justify-content: flex-start; }
    .fox-big { font-size: 2.5rem; }
    .question { font-size: var(--font-size-2xl); }
    .key { min-height: 44px; }
    .answer-display { min-height: 52px; line-height: 46px; }
}

/* Tablette / bureau */
@media (min-width: 768px) {
    .question { font-size: 3.5rem; }
    .choice { min-height: 84px; }
}

@media (prefers-contrast: more) {
    :root { --color-text-light: var(--color-text); --color-border: currentColor; }
}