/* ═══════════════════════════════════════════════════════════════
   MOBILE ICON-BASED FIX - Simple & Clean
   Modern icon navigation + floating action buttons
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    
    /* ═══════════════════════════════════════════════════════════
       ICON-BASED NAVIGATION (Mobile Only)
       ═══════════════════════════════════════════════════════════ */
    
    .nav-links {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        background: rgba(15, 15, 15, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        border-top: 1px solid #2a2a2a !important;
        padding: 8px 0 !important;
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        z-index: 9999 !important;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.5) !important;
        gap: 0 !important;
    }
    
    .nav-link {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 4px !important;
        font-size: 0.65em !important;
        gap: 4px !important;
        min-width: 50px !important;
        border-radius: 8px !important;
        transition: all 0.2s !important;
    }
    
    /* Add icons before text */
    .nav-link[href*="about"]::before { content: "📖"; font-size: 1.4em; }
    .nav-link[href*="cast"]::before { content: "⭐"; font-size: 1.4em; }
    .nav-link[href*="photos"]::before { content: "📸"; font-size: 1.4em; }
    .nav-link[href*="games"]::before { content: "🎮"; font-size: 1.4em; }
    .nav-link[href*="quiz"]::before { content: "🎭"; font-size: 1.4em; }
    .nav-link[href*="wall"]::before { content: "💬"; font-size: 1.4em; }
    .nav-link[href*="book"]::before,
    .nav-link.book-btn::before { content: "🎟️"; font-size: 1.4em; }
    
    .nav-link.active {
        background: rgba(230, 57, 70, 0.2) !important;
        color: #e63946 !important;
    }
    
    .nav-link.book-btn {
        background: rgba(230, 57, 70, 0.3) !important;
    }
    
    /* Hide navbar at top on mobile */
    .navbar {
        padding: 8px 16px !important;
    }
    
    /* ═══════════════════════════════════════════════════════════
       FLOATING ACTION BUTTON (FAB) for Games/Quiz
       ═══════════════════════════════════════════════════════════ */
    
    .start-btn,
    .take-quiz-btn,
    .quiz-card .cta {
        position: fixed !important;
        bottom: 70px !important;
        right: 16px !important;
        left: auto !important;
        width: 60px !important;
        height: 60px !important;
        min-height: 60px !important;
        max-width: 60px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 2em !important;
        z-index: 9998 !important;
        box-shadow: 0 4px 20px rgba(230, 57, 70, 0.5), 0 8px 40px rgba(0,0,0,0.3) !important;
        transform: none !important;
        text-indent: -9999px !important;
        overflow: hidden !important;
    }
    
    .start-btn::after,
    .take-quiz-btn::after,
    .quiz-card .cta::after {
        content: "▶️" !important;
        position: absolute !important;
        text-indent: 0 !important;
        font-size: 0.7em !important;
    }
    
    /* Different icon for game over */
    .game-over .start-btn::after {
        content: "🔄" !important;
    }
    
    /* Normal position during gameplay */
    #reflexes-play .start-btn,
    #shooting-play .start-btn,
    #science-play .start-btn {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        min-height: 48px !important;
        max-width: none !important;
        border-radius: 12px !important;
        text-indent: 0 !important;
        font-size: 1em !important;
    }
    
    #reflexes-play .start-btn::after,
    #shooting-play .start-btn::after,
    #science-play .start-btn::after {
        display: none !important;
    }
    
    /* ═══════════════════════════════════════════════════════════
       BOTTOM SPACING for Navigation Bar
       ═══════════════════════════════════════════════════════════ */
    
    body {
        padding-bottom: 65px !important;
    }
    
    .main-content,
    .content,
    .page-content {
        padding-bottom: 80px !important;
    }
    
    .footer {
        padding-bottom: 80px !important;
    }
    
    /* ═══════════════════════════════════════════════════════════
       COMPACT EVERYTHING - Aggressive Height Reduction
       ═══════════════════════════════════════════════════════════ */
    
    /* Hero sections - MUCH smaller */
    .hero,
    .page-header,
    .page-hero {
        min-height: 35vh !important;
        padding: 70px 12px 20px !important;
    }
    
    .hero h1,
    .page-header h1,
    .page-hero h1 {
        font-size: 1.6em !important;
        margin-bottom: 8px !important;
    }
    
    .hero p,
    .page-header p,
    .page-hero p {
        font-size: 0.9em !important;
    }
    
    /* Compact all sections */
    .booking-section,
    .info-section,
    .section {
        padding: 20px 12px !important;
    }
    
    /* Performance cards - minimal */
    .performance-card,
    .quiz-card,
    .game-container {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }
    
    .card-date {
        font-size: 1.5em !important;
    }
    
    .card-day {
        font-size: 1em !important;
    }
    
    .card-time {
        font-size: 0.85em !important;
    }
    
    /* Compact game elements */
    .game-header {
        padding: 10px !important;
        margin-bottom: 12px !important;
    }
    
    .game-title {
        font-size: 1em !important;
    }
    
    .game-stats {
        gap: 12px !important;
    }
    
    .stat-value {
        font-size: 1.3em !important;
    }
    
    /* Game tabs - icon only */
    .game-tab {
        padding: 12px 8px !important;
    }
    
    .game-tab .name {
        display: none !important;
    }
    
    .game-tab .desc {
        display: none !important;
    }
    
    .game-tab .icon {
        font-size: 1.8em !important;
        margin: 0 !important;
    }
    
    /* Arenas smaller */
    #reflexes-arena,
    #shooting-arena {
        height: 250px !important;
    }
    
    /* Start screens minimal */
    .start-screen {
        padding: 20px 12px !important;
    }
    
    .start-screen h2 {
        font-size: 1.3em !important;
    }
    
    .start-screen p {
        font-size: 0.85em !important;
        margin-bottom: 16px !important;
    }
    
    .instructions {
        font-size: 0.75em !important;
        padding: 12px !important;
    }
    
    /* High score compact */
    .high-score {
        padding: 12px 16px !important;
        margin-top: 16px !important;
    }
    
    .high-score-value {
        font-size: 1.2em !important;
    }
    
    /* Cast page compact */
    .cast-photo {
        height: 200px !important;
    }
    
    .cast-info {
        padding: 16px !important;
    }
    
    .cast-name {
        font-size: 1.2em !important;
    }
    
    .ensemble-avatar {
        width: 70px !important;
        height: 70px !important;
        font-size: 2em !important;
    }
    
    .ensemble-member {
        padding: 12px 8px !important;
    }
    
    /* Quiz cards compact */
    .quiz-icon {
        font-size: 2.5em !important;
    }
    
    .quiz-card h3 {
        font-size: 1.2em !important;
    }
    
    .quiz-card p {
        font-size: 0.85em !important;
        margin-bottom: 16px !important;
    }
    
    /* Elements game */
    .element-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    
    .element-card {
        min-height: 60px !important;
        padding: 6px !important;
    }
    
    .element-symbol {
        font-size: 1.3em !important;
    }
    
    /* ═══════════════════════════════════════════════════════════
       iOS Safe Area Support
       ═══════════════════════════════════════════════════════════ */
    
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
        body {
            padding-bottom: calc(65px + env(safe-area-inset-bottom)) !important;
        }
        
        .nav-links {
            padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        }
        
        .start-btn,
        .take-quiz-btn,
        .quiz-card .cta {
            bottom: calc(70px + env(safe-area-inset-bottom)) !important;
        }
    }
}

/* ═══════════════════════════════════════════════════════════════
   VERY SMALL PHONES (<400px)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 400px) {
    .hero,
    .page-header,
    .page-hero {
        min-height: 30vh !important;
        padding: 65px 10px 16px !important;
    }
    
    .nav-link {
        font-size: 0.6em !important;
        padding: 6px 2px !important;
        min-width: 45px !important;
    }
    
    #reflexes-arena,
    #shooting-arena {
        height: 220px !important;
    }
    
    .cast-photo {
        height: 180px !important;
    }
    
    .ensemble-avatar {
        width: 60px !important;
        height: 60px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   LANDSCAPE MODE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) and (orientation: landscape) {
    .hero,
    .page-header,
    .page-hero {
        min-height: 50vh !important;
    }
    
    #reflexes-arena,
    #shooting-arena {
        height: 200px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP - Remove all mobile fixes
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 769px) {
    .nav-link::before {
        display: none;
    }
}