/* ============================================
   Math Blaster - Responsive Styles
   Mobile, tablet, and desktop overrides,
   orientation handling, and touch optimization
   ============================================ */

/* ---------- Small Mobile (< 360px) ---------- */
@media (max-width: 360px) {
    .hud {
        padding: 4px 6px;
    }

    .hud-value {
        font-size: 12px;
    }

    .hud-value.combo {
        font-size: 15px;
    }

    .hud-label {
        font-size: 6px;
        letter-spacing: 1px;
    }

    .health-bar-container {
        width: 60px;
        height: 5px;
    }

    .typing-display {
        font-size: 14px;
        padding: 6px 10px;
        min-height: 36px;
        letter-spacing: 2px;
    }

    .input-area {
        padding: 4px 6px 8px;
    }

    .game-title {
        font-size: 24px;
    }

    .game-subtitle {
        font-size: 9px;
        letter-spacing: 3px;
        margin-bottom: 20px;
    }

    .menu-btn {
        font-size: 11px;
        padding: 10px 24px;
        min-width: 160px;
        margin: 4px;
    }

    .diff-btn {
        font-size: 9px;
        padding: 6px 10px;
    }

    .powerup-indicators {
        top: 40px;
    }

    .powerup-indicator {
        width: 24px;
        height: 24px;
    }

    .powerup-indicator .powerup-icon {
        width: 12px;
        height: 12px;
    }

    .keyboard-btn {
        width: 38px;
        height: 38px;
        bottom: 60px;
        right: 8px;
    }

    .pause-btn {
        width: 30px;
        height: 30px;
        right: 42px;
    }

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

    .level-cell .level-number {
        font-size: 13px;
    }

    .stat-card .stat-value {
        font-size: 18px;
    }

    .stat-card .stat-label {
        font-size: 8px;
    }

    .stats-grid {
        gap: var(--space-sm);
    }
}

/* ---------- Mobile (< 480px) ---------- */
@media (max-width: 480px) {
    .hud {
        padding: 6px 8px;
    }

    .hud-value {
        font-size: 14px;
    }

    .hud-value.combo {
        font-size: 18px;
    }

    .hud-label {
        font-size: 7px;
    }

    .health-bar-container {
        width: 80px;
        height: 6px;
    }

    .typing-display {
        font-size: 16px;
        padding: 8px 12px;
        min-height: 40px;
    }

    .powerup-indicators {
        top: 45px;
    }

    .powerup-indicator {
        width: 26px;
        height: 26px;
        font-size: 13px;
    }

    .powerup-indicator .powerup-icon {
        width: 14px;
        height: 14px;
    }

    .settings-panel {
        padding: var(--space-md);
    }

    .setting-label {
        font-size: 13px;
    }

    .screen-overlay {
        padding: var(--space-md);
    }

    .leaderboard {
        max-height: 35vh;
    }

    .lb-score {
        font-size: 14px;
    }

    .lb-details {
        font-size: 10px;
    }

    .level-grid {
        grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
        max-height: 45vh;
    }
}

/* ---------- Short Screens (landscape mobile) ---------- */
@media (max-height: 500px) {
    .hud {
        padding: 3px 6px;
    }

    .hud-value {
        font-size: 12px;
    }

    .hud-value.combo {
        font-size: 14px;
    }

    .input-area {
        padding: 3px 6px 6px;
    }

    .typing-display {
        min-height: 34px;
        padding: 6px 10px;
        font-size: 14px;
    }

    .powerup-indicators {
        top: 35px;
    }

    .screen-overlay {
        padding: var(--space-sm);
    }

    .game-title {
        font-size: 22px;
        margin-bottom: 2px;
    }

    .game-subtitle {
        font-size: 9px;
        margin-bottom: 12px;
    }

    .menu-btn {
        padding: 8px 24px;
        margin: 3px;
        font-size: 11px;
    }

    .difficulty-selector {
        margin: 8px 0;
    }

    .diff-btn {
        padding: 5px 10px;
        font-size: 9px;
    }

    .stats-grid {
        margin: 10px 0;
        gap: var(--space-sm);
    }

    .stat-card {
        padding: var(--space-sm);
    }

    .stat-card .stat-value {
        font-size: 16px;
    }

    .wave-banner {
        font-size: 22px;
    }

    .keyboard-btn {
        bottom: 55px;
    }

    .level-grid {
        max-height: 35vh;
    }

    .leaderboard {
        max-height: 30vh;
    }

    .settings-panel {
        max-height: 45vh;
    }
}

@media (max-height: 600px) {
    .hud {
        padding: 4px 8px;
    }

    .input-area {
        padding: 4px 8px 8px;
    }
}

/* ---------- Tablet (481px - 768px) ---------- */
@media (min-width: 481px) and (max-width: 768px) {
    .level-grid {
        grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
        max-width: 450px;
    }

    .stats-grid {
        width: min(80%, 380px);
    }

    .menu-btn {
        min-width: 220px;
    }

    .settings-panel {
        width: min(80%, 380px);
    }
}

/* ---------- Desktop (769px+) ---------- */
@media (min-width: 769px) {
    .keyboard-btn {
        display: none !important;
    }

    .hud-value {
        font-size: 20px;
    }

    .hud-value.combo {
        font-size: 24px;
    }

    .hud-label {
        font-size: 10px;
    }

    .health-bar-container {
        width: 150px;
        height: 10px;
    }

    .typing-display {
        font-size: 22px;
        max-width: 600px;
        margin: 0 auto;
    }

    .input-area {
        padding: var(--space-md) var(--space-xl) var(--space-lg);
    }

    .level-grid {
        grid-template-columns: repeat(10, 1fr);
        max-width: 600px;
    }

    .powerup-indicator {
        width: 36px;
        height: 36px;
    }

    .powerup-indicator .powerup-icon {
        width: 18px;
        height: 18px;
    }

    .menu-btn {
        min-width: 240px;
    }

    .menu-btn:hover {
        transform: scale(1.05);
    }

    .wave-banner {
        font-size: 48px;
    }
}

/* ---------- Large Desktop (1200px+) ---------- */
@media (min-width: 1200px) {
    .typing-display {
        max-width: 700px;
        font-size: 24px;
    }

    .hud {
        padding: var(--space-md) var(--space-xl);
    }

    .hud-value {
        font-size: 22px;
    }

    .health-bar-container {
        width: 180px;
    }
}

/* ---------- Touch Device Optimizations ---------- */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .menu-btn {
        padding: 16px 36px;
        min-height: 48px;
    }

    .diff-btn {
        padding: 10px 16px;
        min-height: 40px;
    }

    .toggle-switch {
        width: 50px;
        height: 28px;
    }

    .toggle-switch::after {
        width: 24px;
        height: 24px;
    }

    .toggle-switch.active::after {
        left: 24px;
    }

    .pause-btn {
        width: 40px;
        height: 40px;
    }

    .level-cell {
        min-height: 48px;
    }

    .reset-btn {
        padding: var(--space-sm) var(--space-xl);
        min-height: 40px;
    }

    .ad-close-btn {
        width: 36px;
        height: 36px;
    }

    /* Remove hover effects on touch devices */
    .menu-btn:hover::before {
        left: -100%;
    }

    .menu-btn:hover {
        transform: none;
    }

    .menu-btn:active {
        transform: scale(0.97);
    }

    .level-cell:hover:not(.locked) {
        transform: none;
    }

    .level-cell:active:not(.locked) {
        transform: scale(0.93);
    }
}

/* ---------- Orientation: Landscape on Mobile ---------- */
@media (max-height: 420px) and (orientation: landscape) {
    .screen-overlay {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: var(--space-sm);
        padding: var(--space-sm) var(--space-lg);
    }

    .game-title {
        font-size: 20px;
        width: 100%;
        margin-bottom: 0;
    }

    .game-subtitle {
        width: 100%;
        margin-bottom: var(--space-sm);
    }

    .difficulty-selector {
        margin: var(--space-sm) 0;
    }

    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        width: min(90%, 500px);
        margin: var(--space-sm) 0;
    }

    .menu-btn {
        padding: 8px 20px;
        min-width: 150px;
        font-size: 10px;
    }

    .level-grid {
        max-height: 50vh;
    }
}

/* ---------- High DPI / Retina ---------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .star {
        /* Slightly smaller stars on retina for crispness */
        transform: scale(0.8);
    }
}

/* ---------- Print (unlikely but good practice) ---------- */
@media print {
    body {
        background: #fff;
        color: #000;
    }

    .stars-container,
    .screen-overlay,
    .hud,
    .input-area,
    .pause-btn,
    .keyboard-btn,
    .ad-overlay {
        display: none !important;
    }
}