/* Responsive Design and Media Queries */
/* ==================================== */

/* Tablet and Small Desktop */
/* ========================= */

@media (max-width: 768px) {
    body {
        padding: 10px;
    }

    .game-container {
        flex-direction: column;
        padding: 15px;
        gap: 15px;
        max-width: 100vw;
    }

    .game-header {
        padding: 15px;
        margin-bottom: 10px;
    }

    .main-title {
        font-size: 1.8em;
        flex-direction: column;
        gap: 8px;
    }
    
    .stats-dashboard {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
        gap: 8px;
    }
    
    .stat-card {
        min-width: 90px;
        padding: 8px 6px;
    }

    .stat-content {
        gap: 2px;
    }

    .stat-label {
        font-size: 0.8em;
    }

    .stat-value {
        font-size: 1.1em;
    }
    
    .action-menu {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
    
    .action-btn {
        padding: 10px 12px;
        font-size: 13px;
        min-width: 80px;
        flex: 1;
        max-width: 120px;
    }

    #gameCanvas {
        width: 100% !important;
        height: auto !important;
        max-width: 100vw;
        max-height: 60vh;
        object-fit: contain;
    }

    .leaderboard {
        min-width: 100%;
        max-height: 300px;
        margin-top: 15px;
    }

    .shop-container, .inventory-container {
        width: 95vw;
        height: 85vh;
        padding: 20px 15px;
        max-width: none;
        max-height: none;
    }

    .shop-header, .inventory-header {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .shop-title, .inventory-title {
        font-size: 1.5em;
        text-align: center;
    }

    .coins-display, .current-boat-display {
        justify-content: center;
        padding: 8px 10px;
    }

    .shop-grid, .inventory-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 5px;
    }

    .boat-card {
        padding: 15px;
    }

    .boat-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .control-tips {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }

    .tip {
        font-size: 12px;
        justify-content: center;
    }

    .control-instruction {
        font-size: 14px;
        flex-direction: column;
        gap: 5px;
    }

    .mobile-controls {
        display: block !important;
    }
}

/* Mobile Controls Display */
/* ======================= */

@media (max-width: 768px) and (pointer: coarse) {
    .mobile-controls {
        display: block;
    }
    
    .control-instruction {
        display: none;
    }

    .desktop-restart {
        display: none !important;
    }

    .mobile-restart {
        display: block !important;
    }
}

/* Small Mobile Phones */
/* =================== */

@media (max-width: 480px) {
    .game-container {
        padding: 10px;
    }

    .main-title {
        font-size: 1.5em;
    }

    .stats-dashboard {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-card {
        min-width: auto;
        padding: 6px 4px;
    }

    .stat-value {
        font-size: 1em;
    }

    .stat-label {
        font-size: 0.7em;
    }

    .action-btn {
        padding: 8px 10px;
        font-size: 12px;
    }

    .btn-text {
        display: none;
    }

    .btn-icon {
        font-size: 1.5em;
    }

    #gameCanvas {
        max-height: 50vh;
    }

    .leaderboard {
        max-height: 250px;
    }

    .shop-container, .inventory-container {
        width: 98vw;
        height: 90vh;
        padding: 15px 10px;
    }

    .boat-image {
        width: 60px;
        height: 60px;
    }

    .boat-image img {
        width: 45px;
        height: 45px;
    }
}