*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, sans-serif;
    background:#f7d9e6;
    overflow:hidden;
}

#game{
    width:100vw;
    height:100vh;

    display:flex;
}

/* LEFT */

canvas{
    width:50%;
    height:100%;
    background:#fff;
    display:block;
}

/* RIGHT */

#panel{

    width:50%;
    height:100%;

    background:white;

    display:flex;
    flex-direction:column;

    padding:20px;

    overflow:auto;

}

#panel h2{

    text-align:center;
    margin-bottom:20px;

}

.tabs{

    display:flex;
    gap:10px;

}

.tabs button{

    flex:1;

    height:50px;

    font-size:18px;

    border:none;

    border-radius:10px;

    background:#ff69b4;

    color:white;

    cursor:pointer;

}

.tabs button:hover{

    background:#ff4f9d;

}

#items{
    margin-top:20px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.item{

    width:100%;
    aspect-ratio:1;

    border:2px solid #ddd;
    border-radius:12px;

    background:#fff;

    cursor:pointer;

    overflow:hidden;

    transition:.2s;

}

.item:hover{

    transform:scale(1.05);

    border-color:#ff69b4;

}

.item img{
    width:70%;
    height:70%;
    object-fit:contain;
    margin:auto;
    display:block;
}

/* MOBILE */

@media(max-width:768px){

#game{

flex-direction:column;

}

canvas{

width:100%;

height:50vh;

}

#panel{

width:100%;

height:50vh;

}

.tabs button{

height:45px;

font-size:16px;

}

#items{

grid-template-columns:repeat(4,1fr);

}

.item{

height:80px;

}

}