/* ============================================
   19. RESPONSIVE & MEDIA QUERIES
   ============================================ */

@media (max-width:768px) {
    nav {
        padding:8px 16px;
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:8px;
    }

    .nav-left {
        display:flex;
        align-items:center;
    }

    .nav-title {
        font-size:0.875rem;
        display:flex;
        align-items:center;
        gap:8px;
    }

    .theme-toggle-label {
        font-size:1rem;
        padding:4px;
    }

    .nav-right {
        gap:12px;
    }

    .nav-right > a {
        font-size:0.75rem;
    }

    .hero {
        padding:60px 16px 48px;
    }

    .manifesto {
        padding:20px;
    }

    .lessons-section {
        padding:48px 16px;
    }

    .modal {
        margin:20px;
    }

    .modal-content {
        padding:20px;
    }

    .quiz-section {
        padding:20px;
    }

    .account-page {
        padding:80px 16px 48px;
    }

    .account-header {
        flex-direction:column;
        text-align:center;
    }

    .user-profile {
        flex-direction:column;
    }

    .level-display {
        justify-content:center;
    }

    .level-bar-info {
        flex-direction:column;
        gap:4px;
    }

    .progress-row {
        flex-wrap:wrap;
        gap:8px;
    }

    .progress-icon {
        width:auto;
    }

    .progress-status {
        width:100%;
        margin-right:0;
        margin-top:8px;
    }

    .progress-link {
        width:100%;
        text-align:center;
    }

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

@media (max-width:768px) {
    .hero h1 {
        font-size:2.5rem !important;
        line-height:1.1 !important;
        letter-spacing:-2px !important;
    }

    .hero .tagline {
        font-size:0.9rem !important;
    }

    .nav-title {
        font-size:0.9rem !important;
    }

    .section-links {
        padding:60px 12px 10px;
        gap:8px;
    }

    .section-links a:not(.search-link) {
        font-size:0.65rem;
        padding:5px 8px;
    }

    .section-title-wrap h2 {
        font-size:1.5rem !important;
    }

    .blog-grid,.lessons-grid,.projects-grid,.resources-grid {
        grid-template-columns:1fr !important;
        padding:0 16px !important;
    }

    .lesson-card,.project-card,.resource-card {
        min-height:auto !important;
        padding:16px !important;
    }

    section {
        padding:16px 16px !important;
    }

    .manifesto {
        padding:24px 16px !important;
    }

    .manifesto p {
        font-size:0.9rem !important;
        line-height:1.6 !important;
    }

    #games .games-grid {
        grid-template-columns:1fr !important;
    }

    #guides {
        padding:32px 16px !important;
    }

    .projects-grid {
        grid-template-columns:1fr !important;
    }

    .resources-grid {
        grid-template-columns:1fr !important;
    }

    footer {
        padding:32px 16px !important;
    }

    footer .footer-content {
        flex-direction:column !important;
        gap:24px !important;
    }

    input[type="text"],input[type="email"],input[type="password"],textarea {
        font-size:16px !important;
    }

    button,.btn {
        padding:12px 20px !important;
        font-size:0.9rem !important;
    }

    table {
        font-size:0.8rem !important;
        display:block;
        overflow-x:auto;
    }

    pre {
        font-size:0.75rem !important;
        padding:12px !important;
        overflow-x:auto;
    }

    .manifesto-content {
        flex-direction: column !important;
    }

    .manifesto-content .manifesto-penguin {
        order: -1;
    }

    .manifesto-content .manifesto-penguin img {
        height: 250px !important;
    }

    .section-links {
        position: static;
        padding: 8px;
        gap: 4px;
        flex-wrap: wrap;
    }

    .section-links a,
    .section-links button {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
        margin: 2px !important;
    }
}

@media (max-width:480px) {
    .hero h1 {
        font-size:2rem !important;
    }

    .section-links a:not(.search-link) {
        font-size:0.6rem;
        padding:4px 6px;
    }

    .blog-grid {
        grid-template-columns:1fr !important;
    }
}

@media (max-width: 768px) {
    .typewriter {
        animation: none;
        width: 100% !important;
    }
}