*, *::before, *::after {
    box-sizing: border-box;
}
aside {
    background: linear-gradient(to bottom, #7f0c8e55, #4a055355);
    width: 16em;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1em;
    grid-row: 2;
    grid-column: 1;
    height: 100%;
    overflow: auto;
    position: relative;
    z-index: 1;
    border-right: 0.5rem solid #7f0c8e55;
}
aside a { 
    flex: 1; 
    background: linear-gradient(to bottom, #7f0c8e55, #4a055355);
    border-radius: 1em;
    text-align:center;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(0deg);
    transition: transform 200ms ease;
    color: #FFFFFFFF;
}
aside a:hover {
    transform: rotate(-3deg);
    background: linear-gradient(to bottom, #a434b355, #6e1b7955);
    cursor: pointer;
}
aside a:active {
    transform: rotate(1deg) scale(0.9);
    background: linear-gradient(to bottom, #35043b88, #23022788);
    outline: 1px solid #bd7dc588;
    color: #b993ab;
    user-select: none;
    cursor:grabbing;
}

footer {
    grid-row: 3;
    grid-column: 1 / -1;  /* spans both columns */
    background: linear-gradient(to bottom, #7f0c8e55, #4a055355);
    width: 100%;
    display: none;
    align-items: center;
    gap: 1rem;
    padding: 1em;
    height: 8em;
    position: relative;
    z-index: 1;
    border-top: 0.5rem solid #7f0c8e55;
}
footer a { 
    flex: 1; 
    background: linear-gradient(to bottom, #7f0c8e55, #4a055355);
    border-radius: 1em;
    text-align:center;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(0deg);
    transition: transform 200ms ease;
    color: #FFFFFFFF;
    min-height: 90%;
}
footer a:hover {
    transform: rotate(-3deg);
    background: linear-gradient(to bottom, #a434b355, #6e1b7955);
    cursor: pointer;
}
footer a:active {
    transform: rotate(1deg) scale(0.9);
    background: linear-gradient(to bottom, #35043b88, #23022788);
    outline: 1px solid #bd7dc588;
    color: #b993ab;
    user-select: none;
    cursor:grabbing;
}
@media (max-width: 768px) {
    body {
        grid-template-columns: 1fr 0px;  
        grid-template-rows: auto 1fr auto;  /* keep 3 rows */
    }
    
    aside {
        display: none;  /* hide the sidebar */
    }
    
    #board {
        grid-column: 1/-1;  /* ensure it fills the single column */
        margin-left: 0rem;
        border-left: 0rem solid #7f0c8e55;
    }
    #items-container { 
        grid-column: 1/-1 !important;
    }
    #item-shop {
        grid-column: 1/-1 !important;
    }
    footer {
        display: flex;  /* show the footer on mobile */
    }
}