/* Responsive Design - Media queries for different screen sizes */

/* Intro Responsive Styles */
@media (max-width: 768px) {
    .intro-title {
        font-size: 2.5rem;
        letter-spacing: 1px;
        -webkit-text-stroke: 1px #333;
    }
    
    .intro-start-btn {
        font-size: 1.2rem;
        padding: 0.8rem 1.5rem;
    }
    
    .intro-credits {
        bottom: 1rem;
    }
    
    .creator-text {
        font-size: 1rem;
    }
    
    .copyright-text {
        font-size: 0.8rem;
    }
}

/* Additional responsive improvements for iPad/tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Fix modal sizing for iPad */
    .modal-content {
        margin: 5% auto;
        padding: 1.5rem;
        width: 85%;
        max-width: 600px;
        max-height: 85vh;
        overflow-y: auto;
    }
    
    /* Fix final results for iPad */
    .final-results {
        max-height: 85vh;
        overflow-y: auto;
        padding: 1.5rem;
    }
    
    .final-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        margin: 1.5rem 0;
    }
    
    .phase {
        padding: 1.5rem;
        margin: 0.5rem;
    }
    
    .phase-header h2 {
        font-size: 1.75rem;
    }
    
    /* Improve button sizes for touch */
    button, .btn {
        min-height: 48px;
        min-width: 48px;
        font-size: 1rem;
        padding: 0.75rem 1rem;
    }
    
    .qty-btn {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    /* Tablet adjustments for new stand/customer layout */
    .stand-scene {
        min-height: 500px;
        height: 60vh;
    }
    
    .stand-container {
        width: 320px; /* Made bigger for iPad */
        right: 20px; /* Moved further to right for iPad */
        bottom: 60px;
    }
    
    .lemonade-stand-container {
        height: 220px; /* Made bigger for iPad */
    }
    
    .customer {
        width: 110px; /* Made bigger for iPad */
        height: 110px;
    }
    
    .customer[data-customer-type="boy"] {
        width: 88px; /* 20% smaller than 110px */
        height: 88px; /* 20% smaller than 110px */
    }
    
    .customer-area {
        right: 250px; /* Adjusted for stand moved further right */
        left: 0; /* Perfect fit to left side without margin */
        bottom: 15px; /* Lowered further from 30px */
        height: 160px;
    }
}

/* Phone specific styles */
@media (max-width: 767px) {
    .modal-content {
        margin: 5% auto;
        padding: 1rem;
        width: 95%;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .final-results {
        margin: 0.5rem;
        padding: 1rem;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .final-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .phase {
        margin: 0.5rem;
        padding: 1rem;
    }
    
    /* Mobile adjustments for new stand/customer layout */
    .stand-scene {
        min-height: 400px;
        height: 50vh;
        padding: 1rem;
    }
    
    .stand-container {
        width: 200px; /* Made bigger for iPhone */
        right: 10px; /* Moved further to right for iPhone */
        bottom: 20px;
    }
    
    .lemonade-stand-container {
        height: 145px; /* Made bigger for iPhone */
    }
    
    .customer {
        width: 85px; /* Made bigger for mobile */
        height: 85px;
    }
    
    .customer[data-customer-type="boy"] {
        width: 68px; /* 20% smaller than 85px */
        height: 68px; /* 20% smaller than 85px */
    }
    
    .customer-area {
        right: 160px; /* Adjusted for stand moved further right */
        left: 0; /* Perfect fit to left side without margin */
        bottom: 5px; /* Lowered further from 10px */
        height: 120px;
    }
    
    .cups-remaining-overlay {
        font-size: 0.9rem;
        padding: 6px 12px;
        bottom: 10px;
    }
    
    /* Mobile header adjustments */
    .game-header h1 {
        font-size: 1.5rem;
    }
    
    .header-content {
        gap: 0.5rem;
    }
    
    .player-info {
        gap: 0.5rem;
    }
    
    /* Mobile form adjustments */
    .planning-controls {
        gap: 1rem;
    }
    
    .control-section {
        padding: 1rem;
    }
    
    .quantity-control input {
        width: 60px;
    }
    
    .qty-btn {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
    
    /* Mobile weather card */
    .weather-card {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .weather-icon {
        font-size: 3rem;
        width: 60px;
        height: 60px;
    }
    
    /* Mobile stats grid */
    .selling-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .stat-item {
        padding: 0.5rem;
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .stat-label {
        font-size: 2rem;
    }
    
    .stat-item span:last-child {
        font-size: 1.1rem;
    }
    
    /* Planning actions responsive */
    .planning-actions {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .bank-btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
    
    /* Bank modal responsive */
    .bank-actions {
        gap: 1rem;
    }
    
    .action-section {
        padding: 0.75rem;
    }
    
    .savings-input {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .savings-input input,
    .savings-input button {
        width: 100%;
    }
}

/* Volume control responsive styles */
@media (max-width: 768px) {
    .volume-control {
        padding: 0.3rem;
        gap: 0.3rem;
    }
    
    .volume-slider {
        width: 60px;
    }
    
    .volume-value {
        font-size: 0.7rem;
        min-width: 25px;
    }
    
    .volume-label {
        font-size: 0.9rem;
    }
    
    .player-info {
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .volume-control {
        order: 1; /* Move volume control to next line on very small screens */
        flex-basis: 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }
    
    .player-info {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
    
    .sound-toggle-btn {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
}

/* Desktop specific styles for larger screens */
@media (min-width: 1025px) {
    .stand-scene {
        min-height: 650px;
        height: 65vh;
    }
    
    .stand-container {
        width: 430px; /* Made bigger for desktop */
        right: 50px; /* Moved further to right for desktop */
        bottom: 100px;
    }
    
    .lemonade-stand-container {
        height: 300px; /* Made bigger for desktop */
    }
    
    .customer-area {
        right: 360px; /* Adjusted for stand moved further right */
        left: 0; /* Perfect fit to left side without margin */
        bottom: 40px; /* Lowered further from 60px */
        height: 220px;
    }
    
    .customer {
        width: 140px; /* Made bigger for desktop */
        height: 140px;
    }
    
    .customer[data-customer-type="boy"] {
        width: 112px; /* 20% smaller than 140px */
        height: 112px; /* 20% smaller than 140px */
    }
}