.kg-levelxp-card,
.kg-kinocoins-card {
    padding-bottom: 20px;
}

.kg-levelxp-body,
.kg-kinocoins-body {
    margin-top: 10px;
}

.kg-levelxp-level {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--gold);
}

.kg-levelxp-name {
    font-size: 13px;
    color: var(--cream-dim);
    margin: 2px 0 10px;
}

.kg-levelxp-bar-track {
    height: 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    margin-bottom: 6px;
}

.kg-levelxp-bar-fill {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--crimson), var(--gold));
    transition: width .5s ease;
}

.kg-levelxp-caption {
    font-size: 12px;
    color: var(--cream-dim);
}

.kg-kinocoins-card {

    border-color: rgba(212, 175, 55, 0.22);
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(212, 175, 55, 0.07), transparent 60%),
        var(--grad-card);
}

.kg-kinocoins-balance {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 36px;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--gold);
}

.kg-kinocoins-available {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cream-dim);
    margin-top: 6px;
}

/* The row itself is the click/tap target (44px+ per mobile guidelines),
   not the small coin icon alone. */
.kg-kinocoins-balance--tappable {
    cursor: pointer;
    padding: 6px 6px 6px 0;
    margin: -6px 0 -6px 0;
    border-radius: 10px;
    min-height: 44px;
    transition: background 0.2s ease;
}
.kg-kinocoins-balance--tappable:hover,
.kg-kinocoins-balance--tappable:focus-visible {
    background: rgba(212, 175, 55, 0.06);
}
.kg-kinocoins-balance--tappable:hover .kinocoin-icon,
.kg-kinocoins-balance--tappable:focus-visible .kinocoin-icon {
    transform: translateY(-1px);
    filter: brightness(1.12) drop-shadow(0 0 3px rgba(212, 175, 55, 0.35));
}
.kg-kinocoins-balance--tappable:hover .kinocoin::before,
.kg-kinocoins-balance--tappable:focus-visible .kinocoin::before {
    opacity: 0.85;
    transform: scale(1.05);
}
.kg-kinocoins-balance--tappable:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .kg-kinocoins-balance--tappable:hover .kinocoin-icon,
    .kg-kinocoins-balance--tappable:focus-visible .kinocoin-icon {
        transform: none;
    }
}

.kg-kinocoins-caption {
    font-size: 12px;
    color: var(--cream-dim);
    margin-top: 4px;
}

.kg-levelxp-empty,
.kg-kinocoins-empty {
    color: var(--cream-dim);
    font-size: 13px;
    line-height: 1.5;
    margin-top: 8px;
}

.kg-levelxp-signin-btn,
.kg-kinocoins-signin-btn {

    display: inline-flex;
    margin-top: 10px;
    font-size: 12px;
    padding: 8px 16px;
}

@media (prefers-reduced-motion: reduce) {
    .kg-levelxp-bar-fill {
        transition: none !important;
    }
}