/* ============================================
   RESPONSIVE STYLES
   ============================================ */

/* Tablet */
@media (max-width: 768px) {
    html { font-size: 15px; }

    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }

    .container { padding: 0 var(--space-md); }

    /* Header */
    .nav-toggle { display: block; }

    .main-nav {
        position: fixed;
        top: 0;
        right: -280px;
        width: 280px;
        height: 100vh;
        background: var(--color-navy-dark);
        flex-direction: column;
        padding: var(--space-3xl) var(--space-lg) var(--space-lg);
        transition: right var(--transition-normal);
        z-index: 200;
        align-items: stretch;
        gap: var(--space-sm);
        box-shadow: -4px 0 30px rgba(0,0,0,0.3);
    }

    .main-nav.open {
        right: 0;
    }

    .main-nav a {
        padding: var(--space-md);
        border-radius: var(--radius-md);
        font-size: 1rem;
    }

    .nav-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 var(--space-md) var(--space-md);
        margin-bottom: var(--space-sm);
        border-bottom: 1px solid rgba(197,160,63,0.2);
    }

    .nav-mobile-header span {
        font-family: var(--font-display);
        font-size: 1.1rem;
        color: var(--color-gold);
        font-weight: 700;
    }

    .nav-close {
        background: none;
        border: none;
        color: var(--color-gold);
        cursor: pointer;
        padding: var(--space-sm);
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-close:hover {
        background: rgba(197,160,63,0.15);
    }

    /* Hero */
    .hero { padding: var(--space-2xl) 0; }
    .hero h1 { font-size: 2.2rem; }
    .hero p { font-size: 1rem; }

    /* Quiz */
    .quiz-container { padding: var(--space-md); }
    .question-card { padding: var(--space-lg); }
    .question-text { font-size: 1.15rem; }

    .quiz-header {
        flex-direction: column;
        align-items: stretch;
    }

    .quiz-timer {
        align-self: flex-end;
    }

    .result-details {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Badges */
    .badges-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    /* Stage Grid */
    .stage-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

    /* Ranks */
    .ranks-showcase {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 480px) {
    html { font-size: 14px; }

    .hero h1 { font-size: 1.8rem; }

    .btn-lg {
        padding: 14px 28px;
        font-size: 1rem;
        width: 100%;
    }

    .question-card { padding: var(--space-md); }

    .option-btn {
        padding: var(--space-md);
    }

    .option-letter {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }

    .result-score { font-size: 2.5rem; }

    .result-details {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }

    .badges-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    .badge-icon {
        width: 60px;
        height: 60px;
    }

    .stage-grid {
        grid-template-columns: 1fr;
    }

    .modal {
        padding: var(--space-lg);
        border-radius: var(--radius-lg);
    }

    .ranks-showcase {
        grid-template-columns: 1fr;
    }

    .site-logo-text {
        font-size: 1.2rem;
    }

    .streak-indicator {
        right: 10px;
        font-size: 0.85rem;
    }
}

/* Large screens */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* Print styles for certificates */
@media print {
    .site-header, .site-footer, .btn, .main-nav { display: none !important; }
    body { background: white; }
    .certificate-wrapper { box-shadow: none !important; }
}