/* Small CSS - Phone/Small Screen Styles */

@media (max-width: 600px), (max-height: 500px) {
    /* Very compact layout for very small screens */
    body {
        overflow-x: hidden;
        overflow-y: auto;
    }

    header {
        flex-wrap: wrap;
        padding: 8px 15px;
        text-align: center;
    }

    header h1 {
        font-size: 20px;
        margin-bottom: 8px;
        width: 100%;
        order: -1;
    }

    #game-stats {
        flex-wrap: wrap;
        gap: 8px;
        font-size: 12px;
        justify-content: center;
    }

    #game-stats span {
        padding: 3px 6px;
        font-size: 11px;
    }

    .header-btn {
        padding: 6px 10px;
        font-size: 12px;
        min-height: 32px;
        min-width: 60px;
    }

    #game-canvas {
        max-height: 50vh;
        border-width: 2px;
    }

    #game-controls {
        padding: 8px;
    }

    /* .tower-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 6px;
    } */

    .tower-btn {
        padding: 10px 8px;
        font-size: 11px;
        min-height: 44px; /* Touch target minimum */
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .tower-name {
        font-size: 12px;
        margin: 2px 0;
    }

    .tower-cost {
        font-size: 10px;
    }

    .hotkey {
        font-size: 9px;
        padding: 1px 4px;
        margin-bottom: 2px;
    }

    /* Create a container for tower info and actions side by side */
    #tower-info-actions-container {
        display: flex;
        gap: 8px;
        align-items: flex-start;
    }

    #tower-info {
        flex: 1;
    }

    #tower-actions {
        flex-shrink: 0;
        width: auto;
        min-width: 100px;
        flex-direction: column;
        gap: 6px;
    }

    #tower-actions button {
        padding: 10px 8px;
        font-size: 11px;
        min-height: 44px;
    }

    #selected-tower-info {
        font-size: 11px;
        line-height: 1.3;
    }

    /* Mobile menus and overlays */
    #game-menu {
        width: 95%;
        max-width: 400px;
        padding: 20px;
        max-height: 90vh;
        overflow-y: auto;
    }

    #welcome-overlay #welcome-content {
        width: 95%;
        max-width: 400px;
        padding: 25px;
        margin: 10px;
    }

    .difficulty-options {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .difficulty-card {
        height: auto;
        min-height: 80px;
        padding: 12px;
    }

    .difficulty-card h4 {
        font-size: 16px;
    }

    .difficulty-card p {
        font-size: 13px;
    }

    #start-game-btn {
        font-size: 18px;
        padding: 12px 30px;
    }

    /* Info overlay mobile styles */
    #info-overlay {
        width: 95%;
        padding: 20px;
        max-height: 85vh;
    }

    .shortcuts-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .back-button {
        position: relative;
        top: auto;
        left: auto;
        margin-bottom: 15px;
        display: block;
        width: fit-content;
    }
}