:root {
    --popup-bg: #66210d;
    --popup-border: #471208;
    --popup-text: #fadf71;

    --reset-bg: #f4ee2f;
    --reset-border: #9b971f;
    --reset-text: #44167d;

    --final-bg: #361b3e;
    --final-border: #1a0721;
    --final-text: #f3eb4f;

    --shadow-reset: 2px 2px 5px rgba(0, 0, 0, 0.8);
    --shadow-final: 4px 4px 7px rgba(0, 0, 0, 0.5);
}

.game-wrapper {
    width: 1920px;
    height: 1080px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.hide {
    display: none;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}

#game-bg {
    z-index: 1;
}

#game-area {
    z-index: 2;
}

.dragbox,
.dropbox {
    position: absolute;
}

.dragbox img,
#game-bg img,
#game-end img {
    width: 100%;
    height: auto;
    display: block;
}

/* Draggable items in left panel - from top to bottom */
#drag-skull,
#drop-skull {
    width: 145px;
    height: 66px;
}

#drag-forearm,
#drop-forearm {
    width: 177px;
    height: 154px;
}

#drag-backplate-1,
#drop-backplate-1 {
    width: 115px;
    height: 152px;
}
#drag-backplate-2,
#drop-backplate-2 {
    width: 153px;
    height: 127px;
}

#drag-backplate-3,
#drop-backplate-3 {
    width: 100px;
    height: 128px;
}

#drag-spine,
#drop-spine {
    width: 157px;
    height: 144px;
}

#drag-tail,
#drop-tail {
    width: 142px;
    height: 147px;
}

#drag-skull {
    left: 8%;
    top: 79.8%;
}

#drag-forearm {
    left: 7.3%;
    top: 13.3%;
}

#drag-backplate-1 {
    left: 15.8%;
    top: 19%;
}

#drag-backplate-2 {
    left: 13.3%;
    top: 62.7%;
}

#drag-backplate-3 {
    left: 8.2%;
    top: 52.5%;
}

#drag-spine {
    left: 14.6%;
    top: 40.2%;
}

#drag-tail {
    left: 7.1%;
    top: 32.3%;
}

/* Drop zones on skeleton - matching the outline positions */
#drop-skull {
    left: 27%;
    top: 54.5%;
}
#drop-forearm {
    left: 36.9%;
    top: 67.4%;
}
#drop-backplate-1 {
    left: 54%;
    top: 23%;
}
#drop-backplate-2 {
    left: 69.3%;
    top: 21.8%;
}
#drop-backplate-3 {
    left: 46.2%;
    top: 28.8%;
}
#drop-spine {
    left: 75%;
    top: 31%;
}
#drop-tail {
    left: 87.6%;
    top: 16.8%;
}

/* apply a red hue to indicate wrong placement */
.drop-wrong {
    filter: hue-rotate(0deg) saturate(30) brightness(0.8);
}

.popup {
    position: absolute;
    background: var(--popup-bg);
    color: var(--popup-text);
    border: solid 10px var(--popup-border);
    padding: 5px 30px;
    width: auto;
    height: 80px;
    line-height: 40px;
    border-radius: 80px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    z-index: 150;
}

/* Position popups near their drop zones */
#popup-skull {
    left: 22%;
    top: 42%;
}

#popup-forearm {
    left: 32%;
    top: 83%;
}

#popup-backplate-1 {
    left: 49%;
    top: 11%;
}

#popup-backplate-2 {
    left: 63%;
    top: 10%;
}

#popup-backplate-3 {
    left: 26%;
    top: 27%;
}

#popup-spine {
    left: 73%;
    top: 48%;
}

#popup-tail {
    left: 81%;
    top: 4%;
}

#game-reset {
    position: absolute;
    bottom: 5%;
    right: 5%;
    color: var(--reset-text);
    font-size: 32px;
    border: solid 5px var(--reset-border);
    background: var(--reset-bg);
    line-height: 1;
    width: auto;
    height: auto;
    text-align: center;
    border-radius: 15px;
    z-index: 200;
    box-shadow: var(--shadow-reset);
    padding: 12px 24px;
}

#game-reset:hover {
    cursor: pointer;
    /* lighten button */
    filter: brightness(1.1);
}

#game-final {
    position: absolute;
    top: 10%;
    left: 5%;
    color: var(--final-text);
    font-size: 38px;
    line-height: 1.2;
    border: solid 6px var(--final-border);
    background: var(--final-bg);
    width: auto;
    height: auto;
    text-align: center;
    border-radius: 30px;
    z-index: 200;
    padding: 0 36px;
    box-shadow: var(--shadow-final);
}