/* css/responsive.css */

/* Small phones (320px - 374px) */
@media (max-width: 374px) {
    .brand-title {
        font-size: 28px;
        letter-spacing: 2px;
    }
    
    .brand-subtitle {
        font-size: 10px;
    }
    
    .intro-description {
        font-size: 13px;
    }
    
    .btn-glow {
        font-size: 13px;
        padding: 14px 24px;
    }
    
    .name-title {
        font-size: 20px;
    }
    
    .question-text {
        font-size: 16px;
    }
    
    .option-btn {
        height: 48px;
    }
    
    .option-letter {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }
    
    .option-text {
        font-size: 13px;
    }
    
    .score-circle {
        width: 150px;
        height: 150px;
    }
    
    .score-circle-percent {
        font-size: 40px;
    }
    
    .price-now {
        font-size: 28px;
    }
}

/* Large phones / Small tablets (429px+) */
@media (min-width: 429px) {
    #app {
        max-width: 480px;
    }
    
    .brand-title {
        font-size: 40px;
    }
    
    .question-text {
        font-size: 20px;
    }
    
    .score-circle {
        width: 200px;
        height: 200px;
    }
    
    .score-circle-percent {
        font-size: 52px;
    }
}

/* Tablets and desktop (769px+) */
@media (min-width: 769px) {
    #app {
        max-width: 500px;
        box-shadow: 0 0 60px rgba(212, 175, 55, 0.1);
        border-radius: var(--radius-lg);
        margin: var(--space-lg) auto;
        min-height: calc(100vh - var(--space-xl) * 2);
        overflow: hidden;
    }
}

/* Landscape mode */
@media (orientation: landscape) and (max-height: 500px) {
    .intro-hero,
    .question-hero,
    .loading-hero {
        height: 200px;
    }
    
    .screen-intro,
    .screen-question,
    .screen-feedback,
    .screen-loading {
        height: auto;
        min-height: 100vh;
    }
}

/* Safe area for notch devices */
@supports (padding: env(safe-area-inset-top)) {
    .screen-intro,
    .screen-name,
    .screen-question,
    .screen-feedback,
    .screen-loading,
    .screen-results,
    .screen-offer {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}