/* public/css/faceit.css — Faceit level badge component */

/* ── Inline badge ─────────────────────────────────────────────────────────── */
.faceit-lvl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 3px;
    border-radius: 3px;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    letter-spacing: 0;
    vertical-align: middle;
    margin-left: 5px;
    flex-shrink: 0;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    user-select: none;
    white-space: nowrap;
    transition: opacity 0.2s;
}

/* Loading shimmer while data is being fetched */
.faceit-lvl:empty {
    background: rgba(128, 128, 128, 0.15);
    border-radius: 3px;
    animation: faceit-shimmer 1.4s ease-in-out infinite;
}

@keyframes faceit-shimmer {
    0%, 100% { opacity: 0.3; }
    50%       { opacity: 0.7; }
}

/* ── Level colors (official Faceit palette) ───────────────────────────────── */
.fl-1, .fl-2 { background: #6b7a8d; }
.fl-3, .fl-4 { background: #e8b52c; }
.fl-5, .fl-6 { background: #e88c2c; }
.fl-7, .fl-8 { background: #e05c2c; }
.fl-9        { background: #d43232; }
.fl-10       { background: #9c1a57; }

/* ── Light theme adjustments ─────────────────────────────────────────────── */
html[data-theme="light"] .faceit-lvl:empty {
    background: rgba(0, 0, 0, 0.07);
}

/* Slightly darker shades stay readable on white bg */
html[data-theme="light"] .fl-1,
html[data-theme="light"] .fl-2 { background: #5a6878; }

html[data-theme="light"] .fl-3,
html[data-theme="light"] .fl-4 { background: #c49520; }

/* ── Large badge variant for profile header ──────────────────────────────── */
.faceit-lvl-lg {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 900;
    margin-left: 8px;
    vertical-align: middle;
}

.faceit-lvl-lg:empty {
    background: rgba(128, 128, 128, 0.15);
    animation: faceit-shimmer 1.4s ease-in-out infinite;
}