/* --- Basic Reset & Body Styling --- */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh; /* Fallback */
    height: 100dvh;
    font-family: sans-serif;
    background-color: #111;
    color: white;
}

/* --- MOBILE-FIRST LAYOUT --- */

/* Body as flex-column for mobile */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Fallback */
    min-height: 100dvh;
}

/* Site Logo for Mobile */
.site-logo {
    display: block;
    width: auto;
    max-width: 70%;
    height: 20vh; /* Fallback */
    height: 20dvh;
    max-height: 120px;
    object-fit: contain;
    margin: 1rem auto 0.5rem;
    flex-shrink: 0;
}

/* Mobile Link Container (Stacked List) */
.container {
    display: grid;
    width: 100vw;
    height: 80vh; /* Fallback */
    height: 80dvh; /* 100dvh - 20dvh (logo) */
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 1fr);
}

/* Mobile individual link styles */
.social-link {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    text-decoration: none;
    border-bottom: 1px solid #333;
}

.social-link:last-child {
    border-bottom: none;
}

/* Mobile image logo styles */
.social-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.5;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Mobile hover effects */
.social-link:hover img {
    opacity: 1;
    transform: scale(1.1);
}

/* Background Color Rules (used by both mobile & desktop) */
.twitch  { background-color: #9146ff; }
.youtube { background-color: #ff0000; }
.discord { background-color: #5865f2; }
.x       { background-color: #000000; }
.merch   { background-color: #ffffff; }


/* --- RESPONSIVENESS --- */

/* MEDIUM: Mobile Landscape */
@media (orientation: landscape) and (max-width: 768px) {
    .site-logo {
        height: 15vh; /* Fallback */
        height: 15dvh;
        max-height: 100px;
        margin: 0.5rem auto;
    }
    
    .container {
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: 1fr; /* Reset portrait rows */
        height: 85vh; /* Fallback */
        height: 85dvh; /* 100dvh - 15dvh (logo) */
    }
    
    .social-link {
        border-bottom: none;
        border-right: 1px solid #333;
    }
    
    .social-link:last-child {
        border-right: none;
    }
}

/* LARGE: Desktop / Tablet (2-over-3 Layout) */
@media (min-width: 769px) {
    
    /* Revert body to simple block layout */
    body {
        display: block;
        position: relative; /* Context for logo */
        overflow: hidden;
        min-height: auto;
    }
    
    /* Center overlay logo for Desktop */
    .site-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        
        /* Sizing */
        height: auto;
        width: 75vw;
        max-width: 900px;
        max-height: 900px;
        
        pointer-events: none; /* Can't be clicked */
        margin: 0;
    }

    /* Desktop Container: 6-col grid for easy layout */
    .container {
        display: grid;
        height: 100vh; /* Fill screen */
        width: 100vw;
        /* A 6-column grid makes 2 and 3-column layouts easy */
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(2, 1fr); /* 2 equal rows */
    }

    /* Reset mobile link styles and add desktop borders */
    .social-link {
        border: none;
        border-top: 1px solid #333;
        border-left: 1px solid #333;
    }

    /* --- Desktop Grid Layout --- */

    /* Top Row */
    .social-link.twitch {
        grid-column: 1 / 4; /* Spans 3 columns (1, 2, 3) */
        grid-row: 1;
    }
    .social-link.youtube {
        grid-column: 4 / 7; /* Spans 3 columns (4, 5, 6) */
        grid-row: 1;
    }

    /* Bottom Row */
    .social-link.discord {
        grid-column: 1 / 3; /* Spans 2 columns (1, 2) */
        grid-row: 2;
    }
    .social-link.x {
        grid-column: 3 / 5; /* Spans 2 columns (3, 4) */
        grid-row: 2;
    }
    .social-link.merch {
        grid-column: 5 / 7; /* Spans 2 columns (5, 6) */
        grid-row: 2;
    }
}