/* ========================================
   UNIFIED DESKTOP GRID SYSTEM
   All icons in ONE grid - no overlapping!
   ======================================== */

.desktop-icons {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 70px;
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
    grid-template-rows: repeat(auto-fill, 100px);
    gap: 20px;
    align-content: start;
    z-index: 2;
    padding: 0;
}

/* Main Icons - Flow naturally in grid (auto-placement) */

/* ============================================
   Game Icons - Bottom Left Corner
   
   NOTE: These positions apply to VISIBLE icons only.
   When desktop-visibility.js sets display:none,
   the icon is removed from grid flow entirely.
   No empty spaces left behind!
   ============================================ */

/* Game Icons - using data-window attribute */
.desktop-icon[data-window="bug-hunter"] {
    grid-column: 1;
    grid-row: -5;
    align-self: end;
}

.desktop-icon[data-window="code-snake"] {
    grid-column: 1;
    grid-row: -4;
    align-self: end;
}

.desktop-icon[data-window="tic-tac-code"] {
    grid-column: 1;
    grid-row: -3;
    align-self: end;
}

.desktop-icon[data-window="flappy-code"] {
    grid-column: 1;
    grid-row: -2;
    align-self: end;
}

/* Legal Icons - Bottom Right Corner */
.desktop-icon[data-window="achievements"] {
    grid-column: -2;
    grid-row: -5;
    align-self: end;
}

.desktop-icon[data-window="faq"] {
    grid-column: -2;
    grid-row: -4;
    align-self: end;
}

.desktop-icon[data-window="privacy"] {
    grid-column: -2;
    grid-row: -3;
    align-self: end;
}

.desktop-icon[data-window="terms"] {
    grid-column: -2;
    grid-row: -2;
    align-self: end;
}

/* ========================================
   RESPONSIVE - Tablets (768px - 1023px)
   ======================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .desktop-icons {
        grid-template-columns: repeat(auto-fill, 75px);
        grid-template-rows: repeat(auto-fill, 75px);
        gap: 12px;
        top: 15px;
        left: 15px;
        right: 15px;
    }
    
    /* Reset game/legal positioning - flow naturally */
    .desktop-icon[data-window="bug-hunter"],
    .desktop-icon[data-window="code-snake"],
    .desktop-icon[data-window="tic-tac-code"],
    .desktop-icon[data-window="flappy-code"],
    .desktop-icon[data-window="achievements"],
    .desktop-icon[data-window="faq"],
    .desktop-icon[data-window="privacy"],
    .desktop-icon[data-window="terms"] {
        grid-column: auto !important;
        grid-row: auto !important;
        align-self: auto !important;
    }
}

/* ========================================
   RESPONSIVE - Mobile Landscape (568px - 767px)
   ======================================== */
@media (min-width: 568px) and (max-width: 767px) and (orientation: landscape) {
    .desktop-icons {
        grid-template-columns: repeat(auto-fill, 65px);
        grid-template-rows: repeat(auto-fill, 65px);
        gap: 10px;
        top: 10px;
        left: 10px;
        right: 10px;
    }
    
    /* Reset all positioning */
    .desktop-icon[data-window="bug-hunter"],
    .desktop-icon[data-window="code-snake"],
    .desktop-icon[data-window="tic-tac-code"],
    .desktop-icon[data-window="flappy-code"],
    .desktop-icon[data-window="achievements"],
    .desktop-icon[data-window="faq"],
    .desktop-icon[data-window="privacy"],
    .desktop-icon[data-window="terms"] {
        grid-column: auto !important;
        grid-row: auto !important;
        align-self: auto !important;
    }
}

/* ========================================
   RESPONSIVE - Mobile Portrait (< 767px)
   ======================================== */
@media (max-width: 767px) {
    .desktop-icons {
        grid-template-columns: repeat(auto-fill, 70px);
        grid-template-rows: auto;
        gap: 12px;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 80px;
        align-content: start;
    }
    
    /* All icons flow naturally on mobile */
    .desktop-icon[data-window="bug-hunter"],
    .desktop-icon[data-window="code-snake"],
    .desktop-icon[data-window="tic-tac-code"],
    .desktop-icon[data-window="flappy-code"],
    .desktop-icon[data-window="achievements"],
    .desktop-icon[data-window="faq"],
    .desktop-icon[data-window="privacy"],
    .desktop-icon[data-window="terms"] {
        grid-column: auto !important;
        grid-row: auto !important;
        align-self: auto !important;
    }
    
    /* Hide games on very small screens */
    .desktop-icon[data-window="bug-hunter"],
    .desktop-icon[data-window="code-snake"],
    .desktop-icon[data-window="tic-tac-code"],
    .desktop-icon[data-window="flappy-code"] {
        display: none !important;
    }
}

/* ========================================
   RESPONSIVE - Small Mobile (< 480px)
   ======================================== */
@media (max-width: 479px) {
    .desktop-icons {
        grid-template-columns: repeat(auto-fill, 65px);
        gap: 10px;
        padding: 8px;
    }
}

/* ========================================
   WIDE SCREENS - More columns
   ======================================== */
@media (min-width: 1920px) {
    .desktop-icons {
        grid-template-columns: repeat(auto-fill, 110px);
        grid-template-rows: repeat(auto-fill, 110px);
        gap: 25px;
    }
}

@media (min-width: 2560px) {
    .desktop-icons {
        grid-template-columns: repeat(auto-fill, 120px);
        grid-template-rows: repeat(auto-fill, 120px);
        gap: 30px;
    }
}