/* Responsive Design */
@media (max-width: 768px) {
    .hero {
        padding-top: 80px; /* Reduced padding for mobile */
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: rgba(34, 32, 24, 0.98);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding: 2rem 0;
        backdrop-filter: blur(10px);
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .nav-menu li {
        margin: 1rem 0;
    }

    .hamburger {
        display: flex;
    }
    
    /* Hamburger animation styles */
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    
    .hamburger.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    
    .hamburger.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
    
    /* Ensure nobles header styling works properly on mobile */
    .header.nobles-header .hamburger span {
        background-color: #8B0000;
    }
    
    .header.nobles-header .hamburger.active span:nth-child(1),
    .header.nobles-header .hamburger.active span:nth-child(3) {
        background-color: #8B0000;
    }

    .kingdom-logo {
        height: 65px;
        max-width: 65px;
        margin-top: -12px;
        margin-bottom: -12px;
    }

    .nav-logo {
        gap: 8px;
    }

    .nav-logo h1 {
        font-size: 1.6rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
        line-height: 1.1;
    }
    
    .kingdom-highlight {
        font-size: 2.4em; /* Double size for mobile */
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .section-title::before,
    .section-title::after {
        display: none;
    }
    
    .kingdom-grid {
        grid-template-columns: 1fr;
    }

    .quests-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Mobile Fire Effects - Full Width Dispersion */
    .quests-section::before {
        left: 15% !important;
    }

    .quests-section::after {
        left: 85% !important;
    }

    .quests-top-section::before {
        left: 25% !important;
    }

    .quests-top-section::after {
        left: 75% !important;
    }

    .fire-spark:nth-child(1) { left: 5% !important; }
    .fire-spark:nth-child(2) { left: 12% !important; }
    .fire-spark:nth-child(3) { left: 20% !important; }
    .fire-spark:nth-child(4) { left: 28% !important; }
    .fire-spark:nth-child(5) { left: 35% !important; }
    .fire-spark:nth-child(6) { left: 42% !important; }
    .fire-spark:nth-child(7) { left: 50% !important; }
    .fire-spark:nth-child(8) { left: 58% !important; }
    .fire-spark:nth-child(9) { left: 65% !important; }
    .fire-spark:nth-child(10) { left: 72% !important; }
    .fire-spark:nth-child(11) { left: 80% !important; }
    .fire-spark:nth-child(12) { left: 88% !important; }
    .fire-spark:nth-child(13) { left: 95% !important; }
    .fire-spark:nth-child(14) { left: 8% !important; }
    .fire-spark:nth-child(15) { left: 92% !important; }

    /* Mobile Mystic Glow Effects - Full Width Dispersion */
    .glow-spark:nth-child(1) { left: 2% !important; }
    .glow-spark:nth-child(2) { left: 8% !important; }
    .glow-spark:nth-child(3) { left: 15% !important; }
    .glow-spark:nth-child(4) { left: 22% !important; }
    .glow-spark:nth-child(5) { left: 28% !important; }
    .glow-spark:nth-child(6) { left: 35% !important; }
    .glow-spark:nth-child(7) { left: 42% !important; }
    .glow-spark:nth-child(8) { left: 48% !important; }
    .glow-spark:nth-child(9) { left: 55% !important; }
    .glow-spark:nth-child(10) { left: 62% !important; }
    .glow-spark:nth-child(11) { left: 68% !important; }
    .glow-spark:nth-child(12) { left: 75% !important; }
    .glow-spark:nth-child(13) { left: 82% !important; }
    .glow-spark:nth-child(14) { left: 88% !important; }
    .glow-spark:nth-child(15) { left: 95% !important; }
    .glow-spark:nth-child(16) { left: 5% !important; }
    .glow-spark:nth-child(17) { left: 18% !important; }
    .glow-spark:nth-child(18) { left: 38% !important; }
    .glow-spark:nth-child(19) { left: 78% !important; }
    .glow-spark:nth-child(20) { left: 92% !important; }

    .kingdom-emblem {
        width: 250px;
        height: 250px;
        right: -60px;
    }
    
    .nobles-carousel {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .noble-portrait {
        height: 280px;
    }
    
    .noble-emoji {
        top: 250px;
        width: 80px;
        height: 80px;
    }
    
    .noble-info {
        padding: 1.5rem;
    }
    
    .noble-info h3 {
        font-size: 1.5rem;
    }
    
    .noble-stats {
        flex-direction: column;
        gap: 1rem;
    }
    
    .noble-stat {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem;
        background: rgba(212, 175, 55, 0.1);
        border-radius: 8px;
    }
    

}

@media (max-width: 480px) {
    .hero {
        padding-top: 60px; /* Even less padding for smaller mobile */
    }

    .kingdom-logo {
        height: 55px;
        max-width: 55px;
        margin-top: -10px;
        margin-bottom: -10px;
    }

    .nav-logo {
        gap: 6px;
    }

    .nav-logo h1 {
        font-size: 1.4rem;
    }

    .hero-title {
        font-size: 2rem;
        line-height: 1.1;
    }
    
    .kingdom-highlight {
        font-size: 2.3em; /* Double size for smaller mobile */
    }

    .container {
        padding: 0 15px;
    }
    
    .kingdom-card,
    .quest-card {
        margin: 0 10px;
    }

    .kingdom-emblem {
        width: 200px;
        height: 200px;
        right: -50px;
        opacity: 0.04;
    }
    
    .noble-portrait {
        height: 300px;
    }
    
    .noble-emoji {
        top: 270px;
        width: 70px;
        height: 70px;
    }
}