/* --- 07.3 Kompaktowy interfejs Relikwiarza ---
   Boczne UI Relikwiarza siedzi w tej samej wysokiej ramce co panel wyboru klasy. */
#merge-side-panel {
    /* Okno. */
    --relic-content-width: 286px;
    --relic-title-margin-bottom: 12px;
    --relic-title-color: #cba86c;
    --relic-title-size: 18px;
    --relic-title-family: var(--font-title);
    --relic-title-weight: 700;
    --relic-list-gap: 4px;
    --relic-row-columns: 1fr auto;
    --relic-row-gap: 14px;
    --relic-row-min-height: 27px;
    --relic-row-padding: 5px 0;
    --relic-row-border: 1px solid rgba(197,160,89,.20);
    --relic-empty-color: #8d7e61;
    --relic-name-color: #cdbb9b;
    --relic-name-size: 14px;
    --relic-name-family: var(--font-body);
    --relic-meta-color: #9e8d67;
    --relic-meta-size: 12px;
    --relic-meta-weight: 400;
    --relic-value-color: #ead29d;
    --relic-value-size: 18px;
    --relic-value-family: var(--font-title);
    --relic-value-weight: 500;

    --merge-grinder-x: 0px;
    --merge-grinder-y: 0px;
    --merge-grinder-width: 180px;
    --merge-grinder-height: 360px;
    min-height: 0;
    padding: 148px 54px 78px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    z-index: 7;
    transform: none;
}

/* Pył. */
#merge-dust-hud {
    width: 286px;
    padding: 0 0 8px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #f4ead4;
    font-family: var(--font-title);
    text-align: center;
    text-shadow: 0 2px 0 #000;
    pointer-events: none;
    transform: translate(0px, 0px);
}

#merge-dust-hud span {
    display: block;
    color: #cba86c;
    font-family: var(--font-title);
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

#merge-dust-hud strong {
    display: block;
    margin-top: 7px;
    color: #caba95;
    font-family: var(--font-title);
    font-size: 38px;
    line-height: 1;
    font-weight: 500;
}

/* Lista aktywnych relikwii i opis pod kursorem. */
.merge-equipped-panel,
.merge-relic-info {
    width: var(--relic-content-width);
    color: #cdbb9b;
    font-family: var(--font-body);
    text-shadow: 0 2px 0 #000;
}

.merge-equipped-panel {
    transform: translate(0px, 0px);
}

.merge-panel-section-title {
    margin-bottom: var(--relic-title-margin-bottom);
    color: var(--relic-title-color);
    font-family: var(--relic-title-family);
    font-size: var(--relic-title-size);
    line-height: 1;
    font-weight: var(--relic-title-weight, 900);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.merge-equipped-list {
    display: grid;
    gap: var(--relic-list-gap);
}

.merge-equipped-item,
.merge-info-line {
    display: grid;
    grid-template-columns: var(--relic-row-columns);
    align-items: center;
    gap: var(--relic-row-gap);
    min-height: var(--relic-row-min-height);
    padding: var(--relic-row-padding);
    border-top: var(--relic-row-border);
}

.merge-equipped-item:first-child {
    border-top: 0;
}

.merge-equipped-item.empty {
    color: var(--relic-empty-color);
}

.merge-equipped-name,
.merge-info-title {
    line-height: 1;
    font-weight: 900;
}

.merge-equipped-name {
    color: var(--relic-name-color);
    font-family: var(--relic-name-family);
    font-size: var(--relic-name-size);
}

.merge-equipped-meta,
.merge-info-label,
.merge-relic-info-empty,
.merge-info-subtitle {
    color: var(--relic-meta-color);
    font-size: var(--relic-meta-size);
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.merge-equipped-meta,
.merge-info-label,
.merge-relic-info-empty {
    font-weight: var(--relic-meta-weight, 900);
}

.merge-equipped-bonus,
.merge-info-value {
    color: var(--relic-value-color);
    font-family: var(--relic-value-family);
    font-size: var(--relic-value-size);
    line-height: 1;
    font-weight: var(--relic-value-weight, 900);
}

.merge-relic-info {
    min-height: 168px;
    margin-top: 2px;
    padding-top: 14px;
    border-top: 1px solid rgba(197,160,89,.24);
    transform: translate(0px, 32px);
}

.merge-info-title {
    margin-bottom: 6px;
    color: #caba95;
    font-family: var(--font-title);
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.merge-info-subtitle {
    margin-bottom: 8px;
}

/* Otchłań. */
#merge-grinder {
    position: fixed;
    left: 40px;
    top: 310px; bottom: auto;
    width: var(--merge-grinder-width);
    height: var(--merge-grinder-height);
    flex: 0 0 var(--merge-grinder-height);
    margin: 0;
    padding: 0;
    border: 0;
    align-self: center;
    background: transparent url("../image/ui/abyss.png") center / 180px 360px no-repeat; image-rendering: pixelated;
    box-shadow: none;
    overflow: visible;
    text-indent: 0;
    filter: var(--merge-grinder-filter);
    transition: transform .15s ease, filter .15s ease;
    transform: translate(var(--merge-grinder-x), var(--merge-grinder-y));
}

#merge-grinder::before,
#merge-grinder::after {
    content: none;
}

/* Przyciski. */
#merge-action-row {
    position: absolute;
    margin: 0;
    top: auto;
    left: 50%;
    right: auto;
    bottom: 60px;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
    z-index: 12;
    transform: translateX(-50%) translate(0, -16px);
    opacity: 1;
}

#merge-toggle-level-btn {
    position: absolute;
    left: 50%;
    bottom: 144px;
    color: #f6dfad;
    font-family: var(--font-title);
    font-size: 20px;
    text-transform: none;
    text-shadow: 0 2px 0 #000;
    transform: translateX(-50%) translate(0, -8px);
    z-index: 12;
}

#merge-create-relic-btn {
    position: absolute;
    left: 50%;
    bottom: 224px;
    color: #f6dfad;
    font-family: var(--font-title);
    font-size: 18px;
    line-height: 1.05;
    letter-spacing: .06em;
    text-transform: none;
    text-shadow: 0 2px 0 #000;
    transform: translateX(-50%) translate(0, -8px);
    z-index: 12;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, filter .16s ease;
}

#merge-create-relic-btn.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


#merge-create-relic-btn:disabled {
    filter: grayscale(.4) brightness(.65);
}

#merge-action-row .game-button {
    padding: 8px 0 0 0;
    font-size: 18px;
    line-height: 1.05;
    letter-spacing: .06em;
}

#merge-dust-hud small {
    display: block;
    margin-top: 8px;
    color: #bca177;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#merge-grinder.active {
    transform: translate(var(--merge-grinder-x), var(--merge-grinder-y));
    filter: var(--merge-grinder-filter);
}

/* --- 07.4 Efekty Relikwiarza --- */
#merge-fx-overlay {
    display: block;
    pointer-events: none;
    image-rendering: pixelated;
    z-index: 21;
}