/* ===== METER TOKEN CIRCLES (flat — same footprint as coin-circle, no gold gradient) ===== */
/* Inline chips for item effects: +N tokens, MAX meter fill, etc. */

.meter-token-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: auto;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 0 6px;
    border-radius: 9999px;
    box-sizing: border-box;
    margin: 0;

    font-family: var(--font-family-body-small);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--meter-pill-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.meter-token-circle span {
    position: relative;
    z-index: 1;
    text-shadow: var(--meter-pill-text-shadow);
}

.meter-token-circle.small {
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    padding: 0 5px;
    font-size: 10px;
}

.meter-token-circle.xsmall {
    min-width: 18px;
    height: 18px;
    min-height: 18px;
    padding: 0 4px;
    font-size: 9px;
}

/* Flat fills (no gradient — distinct from coin chrome) */
.meter-token-circle--xp {
    background: var(--color-accent-xp);
}

.meter-token-circle--food {
    background: var(--color-meter-food);
}

.meter-token-circle--water {
    background: var(--color-meter-water);
}

.meter-token-circle--energy {
    background: var(--color-meter-energy);
}

.meter-token-circle--friendship {
    background: var(--color-meter-friendship);
}

/* Row appended after toast / modal copy */
.meter-token-inline-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
}