/* 
 * responsive.css
 * Completely rebuilt for exact desktop-like positioning
 */

/* Base responsive settings - apply to all screens */
@media screen and (max-width: 1200px) {
    .main-container {
        padding: 10px;
    }
}

/* Mobile devices and tablets */
@media screen and (max-width: 768px) {
    /* Content layout */
    .content-center {
        height: auto;
        margin-top: 40px;
        margin-bottom: 80px;
    }
    
    /* Logo adjustments */
    .logo-container {
        max-width: 85%;
        margin-bottom: 10px;
    }
    
    /* Server options container */
    .server-options {
        flex-direction: column;
        align-items: center;
        gap: 40px;
        width: 100%;
    }
    
    /* Server containers */
    .server-container {
        width: 95%;
        max-width: 400px;
        margin-top: 0;
    }
    
    /* Banner container */
    .banner-container {
        width: calc(100% - 10px);
        height: auto;
        aspect-ratio: 16/9;
    }
    
    /* Update for video banners - ensure they keep the same aspect ratio */
    .server-banner-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* Status container */
    .server-status {
        width: calc(100% - 10px);
    }
    
    /* CRITICAL: Completely new status info layout */
    .status-info {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        width: 100%;
        padding: 8px 10px;
        height: auto;
        min-height: 45px;
    }
    
    /* Reset all status items */
    .status-item {
        width: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto;
    }
    
    /* First column: Players */
    .players {
        grid-column: 1;
        justify-content: flex-start;
    }
    
    /* Second column: Connection */
    .connection {
        grid-column: 2;
        justify-content: center;
    }
    
    /* Third column: Game mode */
    .game-mode {
        grid-column: 3;
        justify-content: flex-end;
    }
    
    /* Icon sizing */
    .icon {
        height: 24px;
        width: auto;
    }
    
    /* Text sizing */
    .status-text, .player-count {
        font-size: 20px;
    }
    
    /* Server type text */
    .server-type {
        font-size: 60px;
    }
    
    /* Status header */
    .status-header {
        font-size: px;
    }
    
    /* Footer adjustments */
    .footer-bar {
        font-size: 14px;
        height: auto;
        padding: 15px 10px;
    }
}

/* Small phones */
@media screen and (max-width: 576px) {
    /* Adjust icon and text sizes */
    .icon {
        height: 20px;
    }
    
    .status-text, .player-count {
        font-size: 18px;
    }
    
    /* Status bar padding */
    .status-info {
        padding: 8px 5px;
    }
    
    /* Space the items better */
    .players {
        padding-left: 5px;
    }
    
    .game-mode {
        padding-right: 5px;
    }
    
    /* Optimize video for smaller screens */
    .server-banner-video {
        height: 100%;
    }
}

/* Very small devices */
@media screen and (max-width: 360px) {
    /* For VERY small devices, stack the items */
    .status-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        padding: 8px 0;
    }
    
    .status-item {
        width: 100%;
        justify-content: center;
    }
}