/* Color scheme: #e3e7af, #eff1c5, #a2a77f, #dfe38c, #035e7b, #002e2c, #51553a */ 

/* --- Layout & Responsiveness --- */
.navigation, .wrapper {
    width: 90%; 
    max-width: 800px;
    margin: auto;
    flex: 1;
}

.imageWrap {
    max-width: 100%;
    height: auto;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background: #51553a;
    margin: 0;
}

/* --- Typography & Elements --- */
header {
    font-family: monospace, serif;
    color: #eff1c5;
    padding: 23px;
}

main {
    color: #e3e7af;
}

h1 {
    color: #e3e7af;
    padding: 23px;
    font-size: 30px;
}

h2 {
    font-size: 23px;
}

/* --- Links --- */
a:link    {color: #eff1c5;}
a:visited {color: #dfe38c;}
a:hover   {color: #035e7b;}
a:active  {color: #002e2c;}

/* --- The Grid & Snake Containers --- */
.butMania {
    margin-top: 20px;
    margin-bottom: 40px;
    width: 100%;
    overflow-x: auto; /* Essential: creates the scrollbar for large grids */
    display: grid;    /* Changed from inline-grid for better container behavior */
    justify-content: center; /* Centers the grid when it's smaller than the screen */
    padding-bottom: 10px;    /* Space for the scrollbar so it doesn't cover buttons */
}

/* --- The Grid Toy Buttons --- */
.butMania button {
    width: 30px;
    height: 30px;
    margin: 1px;
    cursor: pointer;
    background-color: #a2a77f; 
    border: 1px solid #dfe38c;
    flex-shrink: 0; /* Prevents the browser from squishing buttons to fit the width */
}

.butMania button:hover {
    background-color: #dfe38c;
}

/* --- The Snake Arena (Active State) --- */
.butMania.is-snake {
    /* We keep the 20x20 hardcoded here as a fallback */
    grid-template-columns: repeat(20, 20px);
    grid-gap: 1px;
    background-color: #002e2c;
    padding: 2px;
    border: 2px solid #eff1c5;
    width: fit-content; /* Keeps the dark background tight to the 20x20 grid */
    margin-left: auto;
    margin-right: auto;
}

.butMania.is-snake button {
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    flex-shrink: 0;
}

/* --- The Tetris Matrix --- */
#tetrisDisplay {
    display: grid;
    /* 10 columns, 20px each = 200px wide + gaps */
    grid-template-columns: repeat(10, 20px); 
    grid-gap: 1px;
    background-color: #002e2c; /* Same dark "void" as Snake */
    padding: 2px;
    border: 2px solid #eff1c5;
    width: fit-content;
    margin: 20px auto;
}

#tetrisDisplay button {
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background-color: #51553a; /* Empty space color */
}

/* --- Media Queries --- */
@media all and (min-width: 720px) {
    .imageWrap {
        width: auto;
        flex: 1;
    }
    .wrapper {
        width: 600px; 
    }
}