@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Poppins:wght@400;600;700;800&display=swap');

:root {
    --color-deep-space: #0b0514;
    --color-gold: #d4af37;
    --color-gold-glow: rgba(212, 175, 55, 0.4);
    --color-gold-bright: #f3e5ab;
    --color-ruby: #e0115f;
    --color-sapphire: #0f52ba;
    --color-emerald: #50c878;
    --color-purple: #8a2be2;
    --color-text-light: #f5f5f5;

    --font-ui: 'Montserrat', sans-serif;
    --font-speech: 'Poppins', sans-serif;
}

.title-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 1cqh 2cqh rgba(0, 0, 0, 0.8));
}

.start-btn-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0.8cqh 1.5cqh rgba(0, 0, 0, 0.6));
}



.socket::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 0.2cqh solid rgba(212, 175, 55, 0.4);
    background: rgba(26, 11, 46, 0.25);
    box-shadow: inset 0 0 1cqh rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.socket.locked::before {
    display: none;
}


.pos-gem-tl {
    top: 17%;
    left: 8.3%;
    --socket-w: 4.5cqh;
    --socket-h: 4.5cqh;
    --placed-w: 8cqh;
    --placed-h: 12cqh;
}

.pos-gem-tr {
    top: 17%;
    left: 91%;
    --socket-w: 4.5cqh;
    --socket-h: 4.5cqh;
    --placed-w: 8cqh;
    --placed-h: 12cqh;
}

.pos-gem-bl {
    top: 86.5%;
    left: 8%;
    --socket-w: 4.5cqh;
    --socket-h: 4.5cqh;
    --placed-w: 8cqh;
    --placed-h: 12cqh;
}

.pos-gem-br {
    top: 86.4%;
    left: 91.7%;
    --socket-w: 4.5cqh;
    --socket-h: 4.5cqh;
    --placed-w: 8cqh;
    --placed-h: 12cqh;
}

.pos-brooch-top {
    top: 16.5%;
    left: 50%;
    --socket-w: 16cqh;
    --socket-h: 8cqh;
    --placed-w: 16cqh;
    --placed-h: 24cqh;
}

.pos-brooch-bottom {
    top: 86.3%;
    left: 50%;
    --socket-w: 16cqh;
    --socket-h: 8cqh;
    --placed-w: 16cqh;
    --placed-h: 24cqh;
}

.socket-content-castle {
    top: 74.3%;
    left: 50.1%;
    --socket-w: 25cqh;
    --socket-h: 12cqh;
}

.placed-content-castle {
    top: 63.3%;
    left: 50.1%;
    --placed-w: 29.5cqh;
    --placed-h: 29.5cqh;
}

.socket-content-text {
    top: 48%;
    left: 50%;
    --socket-w: 18cqh;
    --socket-h: 13cqh;
}

.placed-content-text {
    top: 48%;
    left: 50%;
    --placed-w: 43cqh;
    --placed-h: 29cqh;
}

.socket {
    width: var(--socket-w, 8cqh);
    height: var(--socket-h, 8cqh);
}

.socket.brooch-top,
.socket.brooch-bottom {
    border-radius: 1cqh;
    display: none;
    z-index: 17;
}

.brooch-phase .socket.brooch-top,
.brooch-phase .socket.brooch-bottom {
    display: flex;
}

.placed-item.brooch-top,
.placed-item.brooch-bottom {
    z-index: 18;
}

.socket.brooch-top::before,
.socket.brooch-bottom::before {
    border-radius: 1cqh;
}

.socket.content-castle,
.socket.content-text {
    border-radius: 1.5cqh;
    display: none;
}

.content-text-phase .socket.content-text {
    display: flex;
}

.content-castle-phase .socket.content-castle {
    display: flex;
}

.socket.content-castle::before,
.socket.content-text::before {
    border-radius: 1.5cqh;
}

.placed-item {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: var(--placed-w, 8cqh);
    height: var(--placed-h, 12cqh);
}

.action-btn.disabled {
    opacity: 0;
    transform: scale(0.5) translateY(20px);
    pointer-events: none;
    position: absolute;
}

.action-btn.greyed-out {
    opacity: 0.45;
    filter: grayscale(100%);
    pointer-events: none;
}

.selection-gem-item.placed-from-menu,
.selection-brooch-item.placed-from-menu {
    pointer-events: none !important;
}

.btn-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(1.3);
    filter: drop-shadow(0 0.3cqh 0.5cqh rgba(0, 0, 0, 0.4));
    transition: filter 0.3s ease, transform 0.3s ease;
}


.gem-selection-overlay {
    background: none;
    border: none;
    box-shadow: none;
}

.selection-gem-item {
    background: none;
    border: none;
    box-shadow: none;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.selection-gem-item.selected {
    transform: scale(1.2) !important;
}

.selection-gem-img {
    width: 90%;
    height: 90%;
    object-fit: contain;
    filter: drop-shadow(0 0.4cqh 0.6cqh rgba(0, 0, 0, 0.45));
    transition: filter 0.3s ease;
}

.selection-gem-item.selected .selection-gem-img {
    filter: drop-shadow(0 0 0.8cqh var(--color-gold)) drop-shadow(0 0.4cqh 0.6cqh rgba(0, 0, 0, 0.45));
}

.selection-gem-item.ruby.selected .selection-gem-img {
    filter: drop-shadow(0 0 1cqh var(--color-ruby)) drop-shadow(0 0.4cqh 0.6cqh rgba(0, 0, 0, 0.45));
}

.selection-gem-item.sapphire.selected .selection-gem-img {
    filter: drop-shadow(0 0 1cqh var(--color-sapphire)) drop-shadow(0 0.4cqh 0.6cqh rgba(0, 0, 0, 0.45));
}

.selection-gem-item.emerald.selected .selection-gem-img {
    filter: drop-shadow(0 0 1cqh var(--color-emerald)) drop-shadow(0 0.4cqh 0.6cqh rgba(0, 0, 0, 0.45));
}

.selection-gem-item.purple.selected .selection-gem-img {
    filter: drop-shadow(0 0 1cqh var(--color-purple)) drop-shadow(0 0.4cqh 0.6cqh rgba(0, 0, 0, 0.45));
}

.selection-brooch-item {
    background: none;
    border: none;
    box-shadow: none;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.selection-brooch-item.selected {
    transform: scale(1.2) !important;
}

.selection-brooch-img {
    width: 95%;
    height: 95%;
    object-fit: contain;
    filter: drop-shadow(0 0.4cqh 0.6cqh rgba(0, 0, 0, 0.45));
    transition: filter 0.3s ease;
}

.selection-brooch-item.selected .selection-brooch-img {
    filter: drop-shadow(0 0 1cqh var(--color-gold)) drop-shadow(0 0.4cqh 0.6cqh rgba(0, 0, 0, 0.45));
}