/* ===== RESPONSIVE FIXES FOR EACH DAY - ENGLISH VERSION ===== */

/* ===== DAY 1 - Market plan ===== */
@media screen and (max-width: 768px) {
    /* 4-digit numeric interface */
    .numeric-input-container {
        display: flex !important;
        gap: 8px !important;
        justify-content: center !important;
        padding: 10px !important;
    }
    
    .numeric-input {
        width: 50px !important;
        height: 50px !important;
        font-size: 20px !important;
        text-align: center !important;
        border: 2px solid #c9a646 !important;
        border-radius: 8px !important;
    }
}

@media screen and (max-width: 480px) {
    .numeric-input {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }
}

/* ===== DAY 3 - 6-digit interface (2x3) ===== */
@media screen and (max-width: 768px) {
    /* Force 2 columns x 3 rows layout */
    .digicode-display.numeric6 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(3, auto) !important;
        gap: 8px !important;
        max-width: 200px !important;
        margin: 0 auto !important;
        padding: 10px !important;
    }
    
    .digicode-display.numeric6 .digit-slot {
        width: 100% !important;
        margin: 0 !important;
    }
    
    .digicode-display.numeric6 .digit-input {
        width: 100% !important;
        height: 50px !important;
        font-size: 20px !important;
        text-align: center !important;
        border: 2px solid #c9a646 !important;
        border-radius: 8px !important;
        margin: 0 !important;
        background: white !important;
    }
}

/* Very small screens - reduce sizes but keep 2x3 */
@media screen and (max-width: 480px) {
    .digicode-display.numeric6 {
        max-width: 160px !important;
        gap: 6px !important;
    }
    
    .digicode-display.numeric6 .digit-input {
        height: 45px !important;
        font-size: 18px !important;
    }
}

/* Ultra small screens */
@media screen and (max-width: 320px) {
    .digicode-display.numeric6 {
        max-width: 140px !important;
        gap: 4px !important;
        padding: 8px !important;
    }
    
    .digicode-display.numeric6 .digit-input {
        height: 40px !important;
        font-size: 16px !important;
    }
}

/* Landscape mode - always 2x3 but wider */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .digicode-display.numeric6 {
        max-width: 240px !important;
        gap: 10px !important;
    }
    
    .digicode-display.numeric6 .digit-input {
        height: 45px !important;
        font-size: 18px !important;
    }
}

/* ===== DAY 2 - Poetry decryption ===== */
@media screen and (max-width: 768px) {
    .text-input-container {
        padding: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .text-input-label {
        font-size: 14px !important;
        margin-bottom: 8px !important;
        display: block !important;
    }
    
    #answerInput {
        width: 100% !important;
        padding: 10px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        border: 2px solid #c9a646 !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
    }
}

/* ===== DAY 4 - Frozen lake sequence (already handled in mobile-improvements) ===== */

/* ===== DAY 6 - Cooking for the banquet ===== */
@media screen and (max-width: 768px) {
    /* Main container */
    .cooking-container {
        padding: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* More compact header */
    .cooking-header h3 {
        font-size: 1.2rem !important;
        margin: 5px 0 !important;
    }
    
    .cooking-subtitle {
        font-size: 0.8rem !important;
        margin: 3px 0 !important;
    }
    
    /* Ingredients section - VERTICAL */
    .ingredients-selection {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Ingredient categories in column */
    .ingredient-categories {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }
    
    /* Each category */
    .ingredient-category {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    .category-title {
        font-size: 1rem !important;
        margin: 5px 0 !important;
        text-align: center !important;
    }
    
    /* Ingredient items - In column on mobile */
    .ingredient-items {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
    }
    
    /* Compact ingredient cards - VERTICAL */
    .ingredient-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px !important;
        background: white !important;
        border: 1px solid #ddd !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
        gap: 6px !important;
    }
    
    /* Ingredient image */
    .ingredient-image {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        position: relative !important;
    }
    
    .ingredient-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
    
    .runic-symbol {
        position: absolute !important;
        bottom: 0 !important;
        right: 0 !important;
        font-size: 10px !important;
        background: rgba(0,0,0,0.7) !important;
        color: white !important;
        padding: 1px 3px !important;
        border-radius: 2px !important;
    }
    
    /* Ingredient info - centered */
    .ingredient-info {
        text-align: center !important;
    }
    
    .ingredient-info h5 {
        font-size: 0.9rem !important;
        margin: 0 !important;
    }
    
    /* Quantity selection - below */
    .ingredient-selection {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    .quantity-controls {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 3px !important;
    }
    
    .quantity-controls label {
        font-size: 0.7rem !important;
        margin: 0 !important;
    }
    
    .quantity-input {
        width: 40px !important;
        height: 30px !important;
        padding: 3px !important;
        font-size: 0.9rem !important;
        text-align: center !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
    }
    
    /* More compact actions */
    .cooking-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center !important;
        margin-top: 10px !important;
    }
    
    .cooking-actions button {
        flex: 1 1 auto !important;
        min-width: 100px !important;
        max-width: 150px !important;
        padding: 8px !important;
        font-size: 0.8rem !important;
    }
}

/* Very small screens */
@media screen and (max-width: 480px) {
    .cooking-container {
        padding: 5px !important;
    }
    
    .ingredient-card {
        padding: 4px !important;
        gap: 6px !important;
    }
    
    .ingredient-image {
        width: 35px !important;
        height: 35px !important;
        min-width: 35px !important;
    }
    
    .ingredient-info h5 {
        font-size: 0.8rem !important;
    }
    
    .quantity-input {
        width: 35px !important;
        height: 25px !important;
        font-size: 0.8rem !important;
    }
    
    .cooking-actions {
        flex-direction: column !important;
    }
    
    .cooking-actions button {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Ultra small screens */
@media screen and (max-width: 320px) {
    .ingredient-image {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
    }
    
    .ingredient-info h5 {
        font-size: 0.7rem !important;
    }
    
    .quantity-controls label {
        font-size: 0.6rem !important;
    }
    
    .quantity-input {
        width: 30px !important;
        height: 22px !important;
        font-size: 0.7rem !important;
    }
}

/* ===== GLOBAL OPTIMIZATIONS FOR ALL DAYS ===== */
@media screen and (max-width: 768px) {
    /* Main containers */
    .enigma-container,
    .puzzle-container,
    .game-container {
        padding: 10px !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* Titles and texts */
    .enigma-title {
        font-size: 1.5rem !important;
        margin-bottom: 10px !important;
    }
    
    .enigma-story {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 15px !important;
    }
    
    /* General buttons */
    .action-button,
    .validate-button,
    .submit-button {
        width: 100% !important;
        max-width: 300px !important;
        margin: 10px auto !important;
        padding: 12px !important;
        font-size: 16px !important;
    }
    
    /* Images */
    .puzzle-image,
    .enigma-image {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }
    
    /* Modals */
    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px !important;
        padding: 15px !important;
    }
}

/* ===== VERY SMALL SCREENS (320px and below) ===== */
@media screen and (max-width: 320px) {
    /* Further size reductions */
    .enigma-title {
        font-size: 1.2rem !important;
    }
    
    .enigma-story {
        font-size: 12px !important;
    }
    
    .action-button,
    .validate-button {
        font-size: 14px !important;
        padding: 10px !important;
    }
    
    /* Even smaller grids */
    .letter-grid,
    .chess-board,
    .maze-grid {
        max-width: 280px !important;
    }
    
    .keypad-grid {
        max-width: 240px !important;
    }
    
    /* Inputs and selects */
    input, select, textarea {
        font-size: 14px !important;
        padding: 8px !important;
    }
}

/* ===== LANDSCAPE MODE ===== */
@media screen and (max-width: 768px) and (orientation: landscape) {
    /* Landscape optimizations */
    .enigma-container {
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    
    /* Grids in landscape mode */
    .equipment-grid,
    .ingredients-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}