/* Mobile optimizations */
@media (max-width: 768px) {
    /* Larger touch targets on mobile */
    .tile-hitbox {
        min-width: 44px;
        min-height: 44px;
    }

    /* Hide tooltip on mobile - use bottom sheet instead */
    .tooltip {
        display: none !important;
    }

    .tooltip-title {
        font-size: 16px;
    }

    .tooltip-prognose {
        font-size: 13px;
    }

    /* Mobile: modal visibility is controlled by top-level media queries below.
       Do not nest @media rules (plain CSS does not support it).
       Comments in English per project convention. */

    /* Bottom sheet adjustments */
    .prediction-bottom-sheet-content {
        padding: 16px;
        /* padding-bottom: 40px; */
    }

    .prediction-bottom-sheet-title {
        font-size: 18px;
    }

    .prediction-bottom-sheet-prognose {
        font-size: 15px;
    }
}

/* Portrait phones: hide modal - use bottom sheet instead.
   Comments in English per project convention. */
@media (max-width: 768px) and (orientation: portrait) {
    .prediction-modal {
        display: none !important;
    }
}

/* Landscape phones: hide bottom sheet, allow modal sidepanel (splitscreen). */
@media (orientation: landscape) and (max-height: 500px) {
    .prediction-bottom-sheet {
        display: none !important;
    }
    .prediction-modal {
        display: flex !important;
    }
}

/* Desktop: Hide bottom sheet */
@media (min-width: 769px) {
    .prediction-bottom-sheet {
        display: none !important;
    }
    
    .prediction-backdrop {
        display: none !important;
    }
}

/* Prevent text selection during panning */
.grid-viewport {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Touch-specific optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Mobile devices */
    .tile-hitbox {
        /* Ensure hitboxes are large enough for touch */
        min-width: 44px;
        min-height: 44px;
    }
    
}