/* ========================= */
/* RESET */
/* ========================= */

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

body{
    margin:0;
    display:flex;
    justify-content:center;
    align-items:center;
    width:100vw;
    height:100vh;
    overflow:hidden;
    background:#85006d;
}

#game{
    position:relative;
    width:1400px;   /* scene + panel */
    height:900px;
}

/* ========================= */
/* LEFT SCENE */
/* ========================= */

#scene{
    position:absolute;
    left:0;
    top:0;

    width:900px;
    height:850px;

    z-index:1;
}

/* Background / pigeon layers */

#scene img{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:contain;

    pointer-events:none;
    user-select:none;

}

#background{z-index:1;}
#star{z-index:2;}
#podium{z-index:3;}
#pigeon{z-index:4;}

#jewelryLayer{z-index:5;}
#glassesLayer{z-index:6;}
#hatLayer{z-index:7;}

/* ========================= */
/* PANEL */
/* ========================= */

#ui{

    position:absolute;

    left:595px;   /* or wherever you've placed it */
    top:70px;

    width:275px;
    height:650px;

    z-index:50;

    background:#bee4f8;

    border:6px solid #6dcff6;

    border-radius:35px;

}

/* Main blue panel */

#panelImage{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:contain;

    z-index:20;

}


/* ========================= */
/* CATEGORY ICONS */
/* ========================= */

#tabs{

    position:absolute;

    left:-35px;
    top:60px;

    display:flex;
    flex-direction:column;

    gap:18px;

}

.tab{

    width:72px;
    height:72px;

    background:white;

    border-radius:20px;

    border:5px solid #5A73D8;

    display:flex;

    justify-content:center;
    align-items:center;

    cursor:pointer;

}

.tab:hover{

    transform:translateX(8px);

}

/* ========================= */
/* ACCESSORY GRID */
/* ========================= */

#items{

    position:absolute;

    top:40px;
    left:55px;

    display:grid;

    grid-template-columns:repeat(2,95px);

    gap:10px;

}

/* ========================= */
/* ITEM */
/* ========================= */

.item{

    width:85px;
    height:85px;

    background:white;

    border-radius:20px;

    display:flex;

    justify-content:center;
    align-items:center;

}

.item:hover{

    transform:scale(1.07);

}

.item.selected{

    outline:4px solid #5d6ee5;

}

.item img{

    max-width:72px;
    max-height:72px;

    object-fit:contain;

}

/* ========================= */
/* ACCESSORY LAYERS */
/* ========================= */

.accessory{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:contain;

    pointer-events:none;

}

/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media (max-width:1600px){

    #game{

        transform:scale(.9);

        transform-origin:center;

    }

}

@media (max-width:1400px){

    #game{

        transform:scale(.8);

    }

}

@media (max-width:1200px){

    #game{

        transform:scale(.7);

    }

}