/* design-system/components/currency.css */
.currency {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-weight: var(--font-weight-bold);
}

.currency__icon {
    font-size: 1.1em;
    display: inline-block;
    vertical-align: middle;
}

.currency__img {
    width: 1.15em;
    height: 1.15em;
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
}

.app-currency-icon {
    width: 1.05em;
    height: 1.05em;
    display: inline-block;
    vertical-align: -0.15em;
    object-fit: contain;
}

.app-currency-icon--sm {
    width: 0.95em;
    height: 0.95em;
    vertical-align: -0.12em;
}

/* Вимикаємо touch-callout/вибір для іконок монет/кристалів (щоб hold не відкривав меню) */
img.currency__img,
img.app-currency-icon,
img.app-currency-icon--sm {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

.currency__value {
    display: inline-block;
    vertical-align: middle;
}

.currency--coin {
    color: var(--color-coin);
}

.currency--spin {
    color: var(--color-spin);
}

.currency--crystal {
    color: var(--color-crystal);
}

/* Large balance display (e.g. at top) */
.currency--large {
    font-size: var(--font-size-2xl);
    justify-content: center;
}