/* ============================================
   DRIVE MAD - Responsive Styles
   ============================================ */

/* ============================================
   DESKTOP (default — > 768px)
   Touch controls MUST be hidden
   ============================================ */

.touch-controls {
    display: none !important;
}

/* ============================================
   TABLET & MOBILE (≤ 768px)
   Touch controls become visible
   ============================================ */

@media (max-width: 768px) {
    /* Show touch controls */
    .touch-controls {
        display: block !important;
    }

    /* Adjust HUD for smaller screens */
    .hud {
        padding: 6px 10px;
    }

    .hud-item {
        padding: 3px 8px;
    }

    .hud-label {
        font-size: 0.5rem;
    }

    .hud-value {
        font-size: 0.85rem;
    }

    .pause-btn {
        width: 34px;
        height: 34px;
        font-size: 1rem;
        top: 6px;
        right: 10px;
    }

    /* Level select grid — smaller cards */
    .level-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 8px;
    }

    /* HTP controls grid — stack vertically */
    .htp-controls-grid {
        grid-template-columns: 1fr;
    }

    /* Menu content padding */
    .menu-content {
        padding: 16px;
        gap: 20px;
    }

    /* Overlay content */
    .overlay-content {
        padding: 20px 16px;
        max-height: 85vh;
    }

    /* Complete stats — wrap */
    .complete-stats {
        gap: 10px;
    }

    .stat-item {
        padding: 10px 12px;
        min-width: 70px;
    }

    /* Settings */
    .settings-content {
        padding: 16px;
    }

    .setting-item {
        padding: 12px 16px;
    }

    /* Dialog */
    .dialog-box {
        padding: 20px;
    }
}

/* ============================================
   SMALL MOBILE (≤ 480px)
   ============================================ */

@media (max-width: 480px) {
    .game-title {
        gap: 8px;
    }

    .menu-btn {
        padding: 12px 16px;
        font-size: 0.85rem;
    }

    .level-grid {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        gap: 6px;
    }

    .level-number {
        font-size: 1rem;
    }

    .overlay-content {
        width: 95%;
        padding: 16px 12px;
    }

    .overlay-title {
        font-size: 1.4rem;
    }

    .overlay-btn {
        padding: 11px 16px;
        font-size: 0.85rem;
    }

    .complete-stats {
        gap: 8px;
    }

    .stat-item {
        padding: 8px 10px;
        min-width: 60px;
    }

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

    .htp-content {
        padding: 12px;
        gap: 12px;
    }

    .settings-content {
        padding: 12px;
        gap: 8px;
    }

    .quality-selector {
        gap: 4px;
    }

    .quality-btn {
        padding: 5px 8px;
        font-size: 0.7rem;
    }
}

/* ============================================
   VERY SMALL (≤ 360px)
   ============================================ */

@media (max-width: 360px) {
    .title-drive,
    .title-mad {
        font-size: 2rem;
        letter-spacing: 2px;
    }

    .game-subtitle {
        font-size: 0.55rem;
        letter-spacing: 3px;
    }

    .menu-btn {
        padding: 10px 12px;
        font-size: 0.8rem;
        gap: 8px;
    }

    .touch-btn {
        width: 75px;
        height: 65px;
    }

    .touch-btn-icon {
        font-size: 1.3rem;
    }

    .touch-btn-label {
        font-size: 0.5rem;
    }

    .level-grid {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    }
}

/* ============================================
   LANDSCAPE MOBILE
   ============================================ */

@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    /* Touch controls — smaller in landscape */
    .touch-btn {
        width: 70px;
        height: 55px;
    }

    .touch-controls {
        padding: 6px 12px;
        padding-bottom: max(6px, env(safe-area-inset-bottom));
    }

    /* HUD compact */
    .hud {
        padding: 4px 10px;
    }

    .hud-item {
        padding: 2px 6px;
    }

    /* Overlay — smaller */
    .overlay-content {
        max-height: 95vh;
        padding: 12px;
    }

    .overlay-title {
        font-size: 1.2rem;
        margin-bottom: 8px;
    }

    .overlay-buttons {
        margin-top: 10px;
        gap: 6px;
    }

    .overlay-btn {
        padding: 9px 16px;
        font-size: 0.8rem;
    }

    .complete-stats {
        margin: 8px 0;
    }

    .star-rating {
        margin: 6px 0;
    }
}

/* ============================================
   SAFE AREA SUPPORT (notch phones)
   ============================================ */

@supports (padding: env(safe-area-inset-bottom)) {
    .touch-controls {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .hud {
        padding-top: max(8px, env(safe-area-inset-top));
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    .screen-header {
        padding-top: max(16px, env(safe-area-inset-top));
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }
}

/* ============================================
   HIGH DPI / RETINA
   ============================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Canvas rendering handled in JS */
}

/* ============================================
   LARGE DESKTOP (≥ 1440px)
   ============================================ */

@media (min-width: 1440px) {
    .menu-content {
        max-width: 520px;
    }

    .menu-btn {
        padding: 16px 28px;
        font-size: 1.1rem;
    }

    .level-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
}

/* ============================================
   PRINT (disable)
   ============================================ */

@media print {
    body {
        display: none;
    }
}