/* Mobile Tetris Game Hero Section Fixes */

/* Base mobile breakpoint */
@media (max-width: 768px) {
    .hero {
        flex-direction: column !important;
        text-align: center !important;
        padding: 80px 15px 40px !important;
        min-height: auto !important;
    }
    
    .hero .container {
        flex-direction: column !important;
        max-width: 100% !important;
    }
    
    .hero-content {
        order: 1 !important;
        margin-bottom: 30px !important;
        width: 100% !important;
    }
    
    .hero-image {
        order: 2 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 !important;
    }
    
    /* Tetris container mobile optimization */
    .tetris-container {
        max-width: 100% !important;
        width: 95% !important;
        margin: 0 auto !important;
        overflow: visible !important;
        border-radius: 8px !important;
    }
    
    /* Tetris game layout */
    .tetris-game {
        padding: 15px !important;
        gap: 15px !important;
        flex-direction: column !important;
        align-items: center !important;
    }
      /* Canvas responsive sizing */
    #tetris-canvas {
        width: 240px !important;
        height: 300px !important;
        max-width: calc(100vw - 60px) !important;
        max-height: 40vh !important;
        object-fit: contain !important;
        border: 1px solid rgba(0, 243, 255, 0.3) !important;
    }
    
    /* Info panel mobile layout */
    .tetris-info {
        flex-direction: row !important;
        justify-content: space-around !important;
        width: 100% !important;
        max-width: 280px !important;
        gap: 10px !important;
    }
    
    /* Next piece canvas sizing */
    #next-canvas {
        width: 60px !important;
        height: 60px !important;
    }
    
    /* Mobile specific text sizing */
    .score-value, .level-value, .lines-value {
        font-size: 16px !important;
    }
    
    .score-label, .level-label, .lines-label, .next-label {
        font-size: 12px !important;
    }
    
    /* Header responsive sizing */
    .tetris-header {
        padding: 8px 12px !important;
    }
    
    .tetris-title {
        font-size: 12px !important;
    }
    
    /* Control hints mobile */
    .control-hints {
        font-size: 10px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 8px !important;
    }
    
    .control-hint {
        padding: 4px 6px !important;
        font-size: 9px !important;
    }
    
    /* Message area */
    .tetris-message {
        font-size: 11px !important;
        padding: 8px 12px !important;
    }
}

/* Small phones */
@media (max-width: 480px) {
    #tetris-canvas {
        width: 240px !important;
        height: 300px !important;
        max-width: calc(100vw - 30px) !important;
    }
    
    .tetris-info {
        max-width: 240px !important;
    }
    
    .tetris-container {
        width: 98% !important;
    }
    
    .hero {
        padding: 70px 10px 30px !important;
    }
}

/* Very small phones */
@media (max-width: 360px) {
    #tetris-canvas {
        width: 200px !important;
        height: 250px !important;
        max-width: calc(100vw - 20px) !important;
    }
    
    .tetris-info {
        max-width: 200px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .tetris-game {
        padding: 10px !important;
        gap: 10px !important;
    }
    
    #next-canvas {
        width: 50px !important;
        height: 50px !important;
    }
}

/* Very small Android devices (360px and below) */
@media (max-width: 360px) {
    .hero {
        padding: 60px 10px 30px !important;
    }
    
    .tetris-container {
        width: 100% !important;
        max-width: calc(100vw - 20px) !important;
    }
    
    #tetris-canvas {
        width: 200px !important;
        height: 250px !important;
        max-width: calc(100vw - 40px) !important;
        max-height: 35vh !important;
    }
    
    .tetris-info {
        max-width: 200px !important;
        gap: 8px !important;
    }
    
    .control-hints {
        font-size: 10px !important;
    }
    
    .tetris-header {
        padding: 8px 10px !important;
    }
    
    .tetris-title {
        font-size: 12px !important;
    }
}

/* Landscape mobile orientation */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        flex-direction: row !important;
        padding: 80px 15px 20px !important;
        min-height: 100vh !important;
    }
    
    .hero-content {
        order: 1 !important;
        flex: 1 !important;
        margin-bottom: 0 !important;
        margin-right: 20px !important;
    }
    
    .hero-image {
        order: 2 !important;
        flex: 0 0 auto !important;
    }
    
    #tetris-canvas {
        width: 220px !important;
        height: 280px !important;
        max-height: 60vh !important;
    }
    
    .tetris-info {
        max-width: 220px !important;
    }
}