/* Marvel Champions - Mobile Responsive Styles */

/* Breakpoints */
/* Mobile: 320px - 767px */
/* Tablet: 768px - 1023px */
/* Desktop: 1024px+ */

/* Base Mobile Styles */
@media (max-width: 767px) {
    /* Game Board Container */
    .game-board {
        padding: 5px;
        overflow-x: auto;
    }
    
    /* Phase Indicator - Move to top and make smaller */
    .phase-indicator-container {
        top: 50px !important;
        min-width: 180px !important;
        padding: 6px 15px !important;
    }
    
    .phase-badge {
        font-size: 1rem !important;
    }
    
    .turn-info {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.8rem !important;
    }
    
    /* Villain Area - Stack vertically */
    .villain-area {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    .villain-card,
    .scheme-card {
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }
    
    /* Player Board - Compact layout */
    .player-board-area {
        grid-template-columns: 1fr !important;
        padding: 10px 5px !important;
    }
    
    .player-identity {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    /* Hand Area - Horizontal scroll */
    .hand-area {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: rgba(0, 0, 0, 0.95) !important;
        padding: 10px 5px !important;
        overflow-x: auto !important;
        z-index: 100 !important;
    }
    
    .hand-cards {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
    }
    
    .hand-card {
        flex: 0 0 80px !important;
        height: 110px !important;
    }
    
    /* Control Bar - Compact */
    .control-bar {
        flex-direction: column !important;
        padding: 5px !important;
        gap: 5px !important;
    }
    
    .action-buttons {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    .action-button {
        padding: 5px 10px !important;
        font-size: 0.85rem !important;
    }
    
    /* Resource Pool - Inline compact */
    .resource-pool {
        position: fixed !important;
        top: 90px !important;
        right: 5px !important;
        padding: 5px !important;
        border-radius: 15px !important;
        z-index: 50 !important;
    }
    
    .resource-item {
        width: 30px !important;
        height: 30px !important;
    }
    
    .resource-icon {
        font-size: 1rem !important;
    }
    
    /* Cards - Smaller on mobile */
    .card-component {
        width: 60px !important;
        height: 85px !important;
        font-size: 0.7rem !important;
    }
    
    /* Modals - Full screen */
    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
    }
    
    .modal-content {
        height: 100% !important;
        border-radius: 0 !important;
    }
    
    /* Debug Panel - Bottom right corner */
    .debug-deck-viewer {
        bottom: 120px !important;
        top: auto !important;
        right: 5px !important;
    }
    
    .debug-deck-viewer.expanded {
        width: 250px !important;
        max-height: 50vh !important;
    }
    
    /* Hide non-essential elements */
    .game-log,
    .spectator-panel,
    .achievement-panel,
    .friends-list {
        display: none !important;
    }
}

/* Tablet Styles */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Game Board */
    .game-board {
        padding: 10px;
    }
    
    /* Villain Area - 2 column grid */
    .villain-area {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    /* Player Board - 2 column */
    .player-board-area {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Cards - Medium size */
    .card-component {
        width: 80px !important;
        height: 110px !important;
    }
    
    /* Hand Area - Wrap allowed */
    .hand-area {
        position: relative !important;
        padding: 15px !important;
    }
    
    .hand-cards {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: center !important;
    }
    
    /* Control Bar */
    .control-bar {
        padding: 10px !important;
    }
    
    /* Debug Panel */
    .debug-deck-viewer.expanded {
        width: 280px !important;
    }
}

/* Landscape Mobile Adjustments */
@media (max-width: 767px) and (orientation: landscape) {
    /* Reduce vertical spacing */
    .phase-indicator-container {
        top: 40px !important;
        padding: 4px 12px !important;
        min-width: 160px !important;
    }
    
    .phase-badge {
        font-size: 0.9rem !important;
    }
    
    /* Compact hand area */
    .hand-area {
        padding: 5px !important;
    }
    
    .hand-card {
        flex: 0 0 60px !important;
        height: 85px !important;
    }
    
    /* Hide more elements to save space */
    .resource-pool {
        top: 70px !important;
    }
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .action-button,
    .btn {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Remove hover effects */
    .card-component:hover {
        transform: none !important;
    }
    
    /* Larger close buttons */
    .modal .btn-close,
    .close-button {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.5rem !important;
    }
    
    /* Prevent accidental touches */
    .hand-card {
        margin-bottom: 10px !important;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper borders and shadows */
    .card-component,
    .phase-indicator-container,
    .resource-pool {
        border-width: 0.5px !important;
    }
}

/* Print styles */
@media print {
    /* Hide UI controls */
    .control-bar,
    .action-buttons,
    .debug-deck-viewer,
    .phase-indicator-container,
    .modal {
        display: none !important;
    }
    
    /* Expand game area */
    .game-board {
        padding: 0 !important;
    }
    
    /* Show all cards clearly */
    .card-component {
        page-break-inside: avoid !important;
    }
}