/* ===== FORCE OVERRIDE MAIN STYLES ===== */
/* These rules have high specificity to override style.css */
@media screen and (max-width: 768px) {
    body .calendar-grid,
    body [data-theme="minimal"] .calendar-grid,
    body [data-theme="alternate"] .calendar-grid,
    #app .calendar-grid,
    #calendarGrid,
    .calendar-view .calendar-grid,
    .main-content .calendar-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
        padding: 8px !important;
        margin: 0 auto !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        min-width: auto !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
    }
    
    /* Ensure calendar days fit properly */
    .calendar-day {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 1 !important;
        box-sizing: border-box !important;
    }
}

/* ===== CALENDAR RESPONSIVE IMPROVEMENTS ===== */

/* Ultra small screens (0-320px) */
@media (max-width: 320px) {
    body .calendar-grid,
    #app .calendar-grid,
    .calendar-view .calendar-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 2px !important;
        padding: 4px !important;
        margin: 0 !important;
        width: calc(100vw - 8px) !important;
        max-width: calc(100vw - 8px) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    .calendar-day {
        aspect-ratio: 1 !important;
        min-height: 35px !important;
        min-width: 35px !important;
        max-height: 50px !important;
        max-width: 50px !important;
        font-size: 10px !important;
        border-radius: 4px !important;
        padding: 2px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }
    
    .calendar-header {
        padding: 8px !important;
        text-align: center !important;
    }
    
    .calendar-header h2 {
        font-size: 18px !important;
    }
    
    .calendar-header p {
        font-size: 12px !important;
    }
}

/* Small screens (321-480px) */
@media (min-width: 321px) and (max-width: 480px) {
    body .calendar-grid,
    #app .calendar-grid,
    .calendar-view .calendar-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 3px !important;
        padding: 6px !important;
        margin: 0 auto !important;
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    .calendar-day {
        aspect-ratio: 1 !important;
        min-height: 40px !important;
        min-width: 40px !important;
        max-height: 60px !important;
        max-width: 60px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
        padding: 3px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }
    
    .calendar-header {
        padding: 12px !important;
    }
    
    .calendar-header h2 {
        font-size: 20px !important;
    }
    
    .calendar-header p {
        font-size: 13px !important;
    }
}

/* Medium mobile screens (481-768px) */
@media (min-width: 481px) and (max-width: 768px) {
    body .calendar-grid,
    #app .calendar-grid,
    .calendar-view .calendar-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
        padding: 12px !important;
        margin: 0 auto !important;
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
    }
    
    .calendar-day {
        aspect-ratio: 1 !important;
        min-height: 45px !important;
        min-width: 45px !important;
        max-height: 70px !important;
        max-width: 70px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        padding: 4px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }
}

/* ===== THEME SPECIFIC OVERRIDES FOR MOBILE ===== */

/* Minimal theme mobile adjustments */
@media (max-width: 768px) {
    [data-theme="minimal"] .calendar-grid {
        gap: 8px !important;
        padding: 12px !important;
    }
    
    [data-theme="minimal"] .calendar-day {
        width: auto !important;
        height: auto !important;
        min-height: 35px !important;
        min-width: 35px !important;
        border-radius: 50% !important;
        font-size: 10px !important;
    }
}

/* Alternate theme mobile adjustments */
@media (max-width: 768px) {
    [data-theme="alternate"] .calendar-grid {
        margin: 10px !important;
        padding: 15px !important;
        border-radius: 10px !important;
    }
    
    [data-theme="alternate"] .calendar-grid:before {
        width: 15px !important;
        border-radius: 10px 0 0 10px !important;
    }
    
    [data-theme="alternate"] .calendar-day {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    }
}

/* ===== GENERAL MOBILE IMPROVEMENTS ===== */

/* Ensure viewport doesn't get cut off */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    * {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }
    
    .main-content {
        padding: 4px !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        margin: 0 !important;
    }
    
    .calendar-view {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    .container {
        padding: 0 4px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

/* Larger touch targets for mobile */
@media (max-width: 768px) {
    .calendar-day {
        min-height: 44px !important; /* iOS recommended minimum touch target */
        min-width: 44px !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }
    
    .calendar-day:focus,
    .calendar-day:hover {
        outline: 2px solid var(--accent-color) !important;
        outline-offset: 2px !important;
        z-index: 10 !important;
    }
}

/* ===== LANDSCAPE ORIENTATION FIXES ===== */

/* Landscape mode on mobile phones */
@media (max-width: 768px) and (orientation: landscape) {
    .calendar-grid {
        grid-template-columns: repeat(8, 1fr) !important;
        gap: 6px !important;
        padding: 8px !important;
    }
    
    .calendar-day {
        min-height: 30px !important;
        min-width: 30px !important;
        max-height: 45px !important;
        max-width: 45px !important;
        font-size: 10px !important;
    }
    
    .calendar-header {
        padding: 8px !important;
    }
    
    .calendar-header h2 {
        font-size: 18px !important;
    }
}

/* ===== ENSURE ALL BOXES VISIBLE ===== */

/* Force visibility on all screen sizes */
@media (max-width: 768px) {
    .calendar-day.unavailable,
    .calendar-day.available,
    .calendar-day.completed {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure grid doesn't break */
    .calendar-grid::after {
        content: "";
        clear: both;
    }
}

/* ===== SPECIFIC FIXES FOR TINY SCREENS ===== */

/* Galaxy Fold and similar tiny screens (280px) */
@media (max-width: 280px) {
    body .calendar-grid,
    #app .calendar-grid,
    #calendarGrid,
    .calendar-view .calendar-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2px !important;
        padding: 3px !important;
        width: calc(100vw - 6px) !important;
        max-width: calc(100vw - 6px) !important;
    }
    
    .calendar-day {
        min-height: 28px !important;
        min-width: 28px !important;
        max-height: 35px !important;
        max-width: 35px !important;
        font-size: 9px !important;
        padding: 1px !important;
    }
    
    .calendar-header h2 {
        font-size: 16px !important;
    }
    
    .calendar-header p {
        font-size: 11px !important;
    }
}

/* ===== FORCE NO HORIZONTAL SCROLL ===== */
@media (max-width: 768px) {
    /* Ultra strict no horizontal scroll rules */
    html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        position: relative !important;
    }
    
    /* Override main CSS rules that cause horizontal scroll */
    body .calendar-grid,
    #app .calendar-grid,
    .calendar-view .calendar-grid,
    [data-theme] .calendar-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: auto !important;
        max-width: calc(100vw - 16px) !important;
        width: calc(100vw - 16px) !important;
        margin: 0 auto !important;
        padding: 8px !important;
        box-sizing: border-box !important;
    }
    
    .calendar-day {
        max-width: none !important;
        width: auto !important;
        flex-shrink: 1 !important;
        box-sizing: border-box !important;
    }
    
    /* Force override main app container */
    .main-content,
    .calendar-view,
    .view {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Override theme-specific rules */
    [data-theme="alternate"] .calendar-grid,
    [data-theme="minimal"] .calendar-grid {
        overflow: hidden !important;
        overflow-x: hidden !important;
        max-width: calc(100vw - 16px) !important;
        width: calc(100vw - 16px) !important;
    }
}

/* ===== OVERRIDE MAIN CSS RESPONSIVE RULES ===== */

/* Override style.css media queries that cause horizontal scroll */
@media (max-width: 480px) {
    body .calendar-grid,
    body [data-theme] .calendar-grid,
    #app .calendar-grid,
    .calendar-view .calendar-grid,
    #calendarView .calendar-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
        padding: 8px !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: auto !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 600px) {
    body .calendar-grid,
    body [data-theme] .calendar-grid,
    #app .calendar-grid,
    .calendar-view .calendar-grid,
    #calendarView .calendar-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
        padding: 8px !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: auto !important;
        box-sizing: border-box !important;
    }
}

/* ===== ULTIMATE OVERRIDE FOR MOBILE ===== */
/* Force 4 columns on all mobile devices - highest specificity */
@media screen and (max-width: 768px) {
    html body #app .main-content .calendar-view .calendar-grid,
    html body #app .main-content #calendarView #calendarGrid,
    html body[data-theme] #app .main-content .calendar-view .calendar-grid,
    html body[data-theme="minimal"] #app .main-content .calendar-view .calendar-grid,
    html body[data-theme="alternate"] #app .main-content .calendar-view .calendar-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
        padding: 8px !important;
        margin: 0 auto !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        min-width: auto !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: auto !important;
    }
}

/* ===== MODAL FULLSCREEN ON MOBILE ===== */
@media (max-width: 768px) {
    .hint-modal:not(.hidden),
    .modal:not(.hidden) {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 99999 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        /* Permettre le clic sur le fond */
        pointer-events: auto !important;
    }
    
    .hint-modal .modal-content,
    .modal .modal-content {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding: 50px 15px 80px 15px !important;
        border-radius: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        /* Reprendre les couleurs du popup original */
        background: linear-gradient(to bottom, #ffffff, #fafafa) !important;
        color: #333333 !important;
        box-shadow: 0 0 0 1px rgba(0,0,0,0.1), inset 0 0 30px rgba(0,0,0,0.05) !important;
        /* Empêcher la propagation du clic */
        pointer-events: auto !important;
    }
    
    /* Optimisation du contenu pour mobile */
    .hint-modal .modal-content > * {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Zone de contenu solution agrandie */
    .hint-modal [style*="background: rgba(255,255,255,0.1)"],
    .modal [style*="background: rgba(255,255,255,0.1)"] {
        background: #f8f9fa !important;
        border: 1px solid #e9ecef !important;
        color: #333333 !important;
        padding: 20px !important;
        margin: 15px 0 !important;
        border-radius: 8px !important;
        min-height: 200px !important;
        flex: 1 !important;
        overflow-y: auto !important;
    }
    
    /* Zone de contenu scrollable */
    .hint-modal #hintText,
    .modal [style*="overflow-y"],
    .hint-modal [style*="min-height"] {
        max-height: calc(100vh - 250px) !important;
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-height: 150px !important;
        padding: 15px !important;
        position: relative !important;
        z-index: 2 !important;
    }
    
    /* Images dans les solutions */
    .hint-modal img,
    .modal img {
        max-width: 100% !important;
        height: auto !important;
        margin: 15px 0 !important;
    }
    
    .hint-modal h3,
    .modal h3 {
        font-size: 1.8rem !important;
        margin-bottom: 20px !important;
        color: #c9a646 !important; /* Titre en doré */
        text-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
    
    .hint-modal p,
    .modal p,
    #hintText {
        font-size: 1.1rem !important;
        line-height: 1.6 !important;
        max-width: 90% !important;
        text-align: center !important;
        color: #333333 !important;
    }
    
    /* Style cohérent pour les zones de texte */
    .hint-modal [style*="background: rgba(255,255,255,0.1)"],
    .modal [style*="background: rgba(255,255,255,0.1)"] {
        background: #f5f5f5 !important;
        border: 1px solid #e0e0e0 !important;
        color: #333333 !important;
    }
    
    /* Boutons avec couleurs dorées de l'app - agrandis */
    .hint-modal .btn-primary,
    .modal .btn-primary {
        background: linear-gradient(135deg, #c9a646 0%, #b8952e 100%) !important;
        color: #000000 !important;
        border: 2px solid #c9a646 !important;
        border-radius: 8px !important;
        padding: 8px 16px !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        margin: 5px !important;
        min-height: 42px !important;
        min-width: 140px !important;
        flex: 1 !important;
        max-width: 200px !important;
    }
    
    .hint-modal .btn-primary:hover,
    .modal .btn-primary:hover {
        background: linear-gradient(135deg, #b8952e 0%, #c9a646 100%) !important;
        transform: translateY(-1px) scale(1.02) !important;
        box-shadow: 0 4px 16px rgba(201, 166, 70, 0.4) !important;
    }
    
    .hint-modal .btn-secondary,
    .modal .btn-secondary {
        background: linear-gradient(135deg, #c9a646 0%, #b8952e 100%) !important;
        color: #000000 !important;
        border: 2px solid #c9a646 !important;
        border-radius: 8px !important;
        padding: 8px 16px !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        margin: 5px !important;
        opacity: 0.8 !important;
        min-height: 42px !important;
        min-width: 140px !important;
        flex: 1 !important;
        max-width: 200px !important;
    }
    
    .hint-modal .btn-secondary:hover,
    .modal .btn-secondary:hover {
        background: linear-gradient(135deg, #b8952e 0%, #c9a646 100%) !important;
        transform: translateY(-1px) scale(1.02) !important;
        box-shadow: 0 4px 16px rgba(201, 166, 70, 0.4) !important;
        opacity: 1 !important;
    }
    
    /* Boutons d'indices spécifiques */
    .hint-buttons button {
        min-width: 100px !important;
        padding: 10px 15px !important;
        margin: 5px !important;
        font-size: 1rem !important;
        border-radius: 6px !important;
    }
    
    /* Bouton actif - style primary doré */
    .hint-buttons .btn-primary {
        background: linear-gradient(135deg, #c9a646 0%, #b8952e 100%) !important;
        color: #000000 !important;
        border: 2px solid #c9a646 !important;
    }
    
    /* Bouton inactif - style secondary doré plus clair */
    .hint-buttons .btn-secondary {
        background: linear-gradient(135deg, #c9a646 0%, #b8952e 100%) !important;
        color: #000000 !important;
        border: 2px solid #c9a646 !important;
        opacity: 0.7 !important;
    }
    
    /* Fix pour les éléments inline-style */
    .hint-modal [style*="display: flex"],
    .modal [style*="display: flex"] {
        flex-wrap: wrap !important;
    }
    
    /* Amélioration du scroll */
    .hint-modal:not(.hidden) {
        overflow-y: hidden !important;
    }
    
    .hint-modal .modal-content::-webkit-scrollbar {
        width: 8px !important;
    }
    
    .hint-modal .modal-content::-webkit-scrollbar-track {
        background: #f1f1f1 !important;
        border-radius: 10px !important;
    }
    
    .hint-modal .modal-content::-webkit-scrollbar-thumb {
        background: #c9a646 !important;
        border-radius: 10px !important;
        border: 2px solid #f1f1f1 !important;
    }
    
    /* Solution avec hauteur complète */
    .hint-modal h4,
    .modal h4 {
        color: #c9a646 !important;
        font-size: 1.3rem !important;
        margin: 15px 0 10px 0 !important;
    }
    
    /* Texte de solution */
    .hint-modal [style*="font-weight: bold"],
    .modal [style*="font-weight: bold"] {
        background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,215,0,0.1)) !important;
        padding: 15px !important;
        border-radius: 8px !important;
        border: 2px solid #FFD700 !important;
        color: #000000 !important;
        font-size: 1.2rem !important;
        margin: 10px 0 !important;
    }
    
    /* Ajustement des marges pour éviter le chevauchement */
    .hint-modal .hint-buttons {
        margin-bottom: 20px !important;
    }

    .hint-modal [style*="margin-top: 20px"],
    .modal [style*="margin-top: 20px"] {
        margin-top: 20px !important;
        padding: 20px 15px 15px 15px !important;
        position: relative !important;
        bottom: auto !important;
        background: linear-gradient(to top, #ffffff 95%, rgba(255,255,255,0.8)) !important;
        width: 100% !important;
        min-height: 70px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
        border-top: 1px solid #e9ecef !important;
        z-index: 1 !important;
    }
    
    /* Agrandir l'espacement des groupes de boutons */
    .hint-modal [style*="display: flex"][style*="gap: 10px"],
    .modal [style*="display: flex"][style*="gap: 10px"] {
        gap: 15px !important;
        margin: 0 !important;
        width: 100% !important;
        justify-content: space-evenly !important;
    }
}

/* ===== ÉCRANS TRÈS PETITS (320px et moins) ===== */
@media (max-width: 320px) {
    .hint-modal .modal-content,
    .modal .modal-content {
        padding: 40px 5px 5px 5px !important;
    }
    
    .hint-modal h3,
    .modal h3 {
        font-size: 1.5rem !important;
        margin-bottom: 15px !important;
    }
    
    .hint-modal p,
    .modal p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        padding: 0 5px !important;
    }
    
    .hint-modal .btn-primary,
    .modal .btn-primary,
    .hint-modal .btn-secondary,
    .modal .btn-secondary {
        padding: 1px 0px !important;
        font-size: 0.8rem !important;
        margin: 2px !important;
        border-radius: 4px !important;
        min-height: 28px !important;
        min-width: 70px !important;
    }
    
    .hint-buttons button {
        min-width: 80px !important;
        padding: 8px 12px !important;
        font-size: 0.9rem !important;
    }
    
    /* Images plus petites sur petits écrans */
    .hint-modal img,
    .modal img {
        max-width: 95% !important;
    }
    
    /* Zone de solution plus compacte */
    .hint-modal [style*="background: rgba(255,255,255,0.1)"],
    .modal [style*="background: rgba(255,255,255,0.1)"] {
        padding: 10px !important;
        margin: 10px 0 !important;
    }
}

/* ===== ÉCRANS MOYENS MOBILES (321px à 480px) ===== */
@media (min-width: 321px) and (max-width: 480px) {
    .hint-modal .modal-content,
    .modal .modal-content {
        padding: 45px 8px 8px 8px !important;
    }
    
    .hint-modal h3,
    .modal h3 {
        font-size: 1.6rem !important;
    }
    
    .hint-modal p,
    .modal p {
        font-size: 1.05rem !important;
        padding: 0 8px !important;
    }
    
    .hint-modal .btn-primary,
    .modal .btn-primary,
    .hint-modal .btn-secondary,
    .modal .btn-secondary {
        padding: 1px 0px !important;
        font-size: 0.85rem !important;
        margin: 2px !important;
        min-height: 30px !important;
        min-width: 75px !important;
    }
}

/* ===== MODAL CLOSE BUTTON STYLING ===== */
.modal-close-btn {
    position: fixed !important;
    top: 15px !important;
    right: 15px !important;
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: #c9a646 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    z-index: 100000 !important;
    padding: 0 !important;
}

.modal-close-btn:hover {
    background: transparent !important;
    transform: scale(1.1) !important;
    opacity: 0.7 !important;
}

.modal-close-btn svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #c9a646 !important;
    stroke-width: 2.5 !important;
}

@media (max-width: 768px) {
    .modal-close-btn {
        top: 10px !important;
        right: 10px !important;
        width: 22px !important;
        height: 22px !important;
    }
    
    .modal-close-btn svg {
        width: 18px !important;
        height: 18px !important;
    }
}

@media (max-width: 320px) {
    .modal-close-btn {
        top: 8px !important;
        right: 8px !important;
        width: 20px !important;
        height: 20px !important;
    }
    
    .modal-close-btn svg {
        width: 16px !important;
        height: 16px !important;
        stroke-width: 2 !important;
    }
}

/* ===== DEBUGGING HELPER (remove in production) ===== */
/*
@media (max-width: 768px) {
    .calendar-grid {
        border: 2px solid red !important;
    }
    
    .calendar-day {
        border: 1px solid blue !important;
    }
}
*/

/* ===== BUTTONS AND FORMS RESPONSIVE ===== */

/* General button responsive styles */
@media screen and (max-width: 768px) {
    /* All buttons should fit within screen */
    button, .btn, .btn-primary, .btn-secondary, .btn-small {
        max-width: 100% !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        padding: 8px 12px !important;
        font-size: 0.9rem !important;
        min-height: 36px !important;
    }
    
    /* Button containers */
    .action-buttons, .digicode-actions, .puzzle-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 0 8px !important;
        box-sizing: border-box !important;
    }
    
    .action-buttons > *, 
    .digicode-actions > *, 
    .puzzle-actions > * {
        flex: 1 1 auto !important;
        min-width: 100px !important;
        max-width: 200px !important;
    }
    
    /* Forms and inputs */
    input, textarea, select, .answer-input {
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        box-sizing: border-box !important;
    }
    
    /* Answer sections */
    .answer-section, .puzzle-container, .enigma-content {
        padding: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* Code input containers */
    .code-input, .digicode-container, .answer-group {
        width: 100% !important;
        padding: 8px !important;
        box-sizing: border-box !important;
    }
    
    .code-input input {
        width: calc(100% - 16px) !important;
        margin: 8px auto !important;
        display: block !important;
    }
    
    /* Modal and dialog buttons */
    .modal-actions, .dialog-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }
    
    .modal-actions button, .dialog-buttons button {
        width: 100% !important;
    }
}

/* Small screens (480px and below) */
@media screen and (max-width: 480px) {
    button, .btn, .btn-primary, .btn-secondary {
        padding: 6px 10px !important;
        font-size: 0.85rem !important;
        min-height: 32px !important;
    }
    
    .action-buttons, .digicode-actions, .puzzle-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .action-buttons > *, 
    .digicode-actions > *, 
    .puzzle-actions > * {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    /* Stack navigation buttons vertically on very small screens */
    .hint-navigation {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .hint-navigation button {
        width: 100% !important;
    }
    
    /* Ensure forms don't overflow */
    form {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* Very small screens (320px and below) */
@media screen and (max-width: 320px) {
    button, .btn, .btn-primary, .btn-secondary {
        padding: 5px 8px !important;
        font-size: 0.8rem !important;
        min-height: 28px !important;
    }
    
    input, textarea, select {
        padding: 6px !important;
        font-size: 14px !important;
    }
    
    .answer-section, .puzzle-container {
        padding: 8px !important;
    }
}

/* Landscape mode adjustments */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .action-buttons, .digicode-actions {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    
    .action-buttons > *, .digicode-actions > * {
        flex: 1 1 45% !important;
        max-width: 48% !important;
    }
}

/* ===== TEMPLE FIREPLACE AND DOORS MOBILE FIXES ===== */

/* Force visibility of temple elements on mobile */
@media screen and (max-width: 768px) {
    .temple-fireplace {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 10px 0 !important;
        padding: 5px !important;
    }
    
    .fireplace-rect {
        display: block !important;
        position: relative !important;
        width: 90px !important;
        height: 18px !important;
        background: #8B4513 !important;
        border-radius: 6px 6px 0 0 !important;
        border: 2px solid #654321 !important;
        margin: 0 auto !important;
    }
    
    .fireplace-rect::before {
        content: '' !important;
        position: absolute !important;
        top: 3px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 60px !important;
        height: 10px !important;
        background: #1a1a1a !important;
        border-radius: 6px 6px 0 0 !important;
        border: 1px solid #333 !important;
        display: block !important;
    }
    
    .fireplace-rect::after {
        content: '🔥' !important;
        position: absolute !important;
        top: 1px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 0.6rem !important;
        animation: flicker-mini 1.5s infinite !important;
        display: block !important;
        z-index: 10 !important;
    }
    
    .temple-doors {
        display: flex !important;
        justify-content: center !important;
        align-items: flex-end !important;
        gap: 3px !important;
        width: 100% !important;
        margin: 10px 0 !important;
        height: 22px !important;
        padding: 5px !important;
    }
    
    .door-bar {
        background: #8B4513 !important;
        border: 1px solid #654321 !important;
        position: relative !important;
        display: block !important;
    }
    
    .door-bar.left {
        width: 30px !important;
        height: 18px !important;
        border-radius: 3px 3px 0 0 !important;
        transform: perspective(80px) rotateY(20deg) !important;
        transform-origin: right center !important;
    }
    
    .door-bar.left::after {
        content: '' !important;
        position: absolute !important;
        width: 2px !important;
        height: 2px !important;
        background: gold !important;
        border-radius: 50% !important;
        right: 3px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        box-shadow: 0 0 2px rgba(255, 215, 0, 0.8) !important;
        display: block !important;
    }
    
    .door-bar.right {
        width: 30px !important;
        height: 18px !important;
        border-radius: 3px 3px 0 0 !important;
        transform: perspective(80px) rotateY(-20deg) !important;
        transform-origin: left center !important;
    }
    
    .door-bar.right::after {
        content: '' !important;
        position: absolute !important;
        width: 2px !important;
        height: 2px !important;
        background: gold !important;
        border-radius: 50% !important;
        left: 3px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        box-shadow: 0 0 2px rgba(255, 215, 0, 0.8) !important;
        display: block !important;
    }
    
    .door-bar.center {
        width: 35px !important;
        height: 3px !important;
        background: #4a3018 !important;
        border-radius: 0 !important;
        border: 1px solid #333 !important;
        margin-bottom: 0 !important;
    }
}

/* Very small screens - make elements even more visible */
@media screen and (max-width: 480px) {
    .temple-fireplace {
        margin: 8px 0 !important;
        padding: 3px !important;
    }
    
    .fireplace-rect {
        width: 80px !important;
        height: 16px !important;
    }
    
    .fireplace-rect::before {
        width: 50px !important;
        height: 9px !important;
    }
    
    .fireplace-rect::after {
        font-size: 0.5rem !important;
    }
    
    .temple-doors {
        height: 20px !important;
        margin: 8px 0 !important;
    }
    
    .door-bar.left, .door-bar.right {
        width: 26px !important;
        height: 16px !important;
    }
    
    .door-bar.center {
        width: 30px !important;
        height: 3px !important;
    }
}

/* Ultra small screens */
@media screen and (max-width: 320px) {
    .fireplace-rect {
        width: 70px !important;
        height: 14px !important;
    }
    
    .fireplace-rect::before {
        width: 45px !important;
        height: 8px !important;
    }
    
    .door-bar.left, .door-bar.right {
        width: 22px !important;
        height: 14px !important;
    }
    
    .door-bar.center {
        width: 25px !important;
    }
}

/* ===== DAY 24 - TEMPLE CONTAINER RESPONSIVE ===== */

/* Mobile screens (768px and below) */
@media screen and (max-width: 768px) {
    .temple-container {
        padding: 8px !important;
        margin: 8px 0 !important;
        background: linear-gradient(135deg, #f8f8f8 0%, #e8e8e8 100%) !important;
        border-radius: 12px !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    .temple-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(3, auto) !important;
        gap: 6px !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }
    
    .statuette-item {
        padding: 6px !important;
        min-height: 120px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: white !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
    }
    
    .statuette-image-container {
        width: 60px !important;
        height: 60px !important;
        margin: 0 auto 4px !important;
    }
    
    .statuette-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
    
    .statuette-name {
        font-size: 0.75rem !important;
        margin: 2px 0 !important;
    }
    
    .orientation-buttons {
        display: flex !important;
        gap: 2px !important;
        margin-top: 4px !important;
    }
    
    .orientation-buttons button {
        padding: 4px 6px !important;
        font-size: 0.7rem !important;
        min-width: auto !important;
    }
}

/* Very small screens (320px and below) */
@media screen and (max-width: 320px) {
    .temple-container {
        padding: 4px !important;
        margin: 4px 0 !important;
    }
    
    .temple-grid {
        gap: 4px !important;
    }
    
    .statuette-item {
        padding: 4px !important;
        min-height: 100px !important;
    }
    
    .statuette-image-container {
        width: 45px !important;
        height: 45px !important;
    }
    
    .statuette-name {
        font-size: 0.65rem !important;
    }
    
    .orientation-buttons button {
        padding: 3px 5px !important;
        font-size: 0.65rem !important;
    }
}

/* Landscape mode improvements for temple */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .temple-container {
        max-height: 80vh !important;
        overflow-y: auto !important;
    }
    
    .temple-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        grid-template-rows: repeat(2, auto) !important;
    }
    
    .statuette-item {
        min-height: 90px !important;
    }
    
    .statuette-image-container {
        width: 50px !important;
        height: 50px !important;
    }
}