.karma-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.karma-container .count {
    color: var(--mist-dim);
    font-family: 'Cinzel', serif;
    font-weight: 600;
}

.karma-container.upvoted .count {
    color: var(--gold-light);
}

/**********************
 *
 * Karma icon
 *
 **********************/

.karma-btn {
    background: none;
    outline: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.karma-btn .k-outer {
    fill: none;
    stroke: url(#ku-stroke);
    stroke-width: 1;
    stroke-linejoin: miter;
    stroke-miterlimit: 10;
    opacity: 0.55;
    transition: opacity 0.18s;
}

.karma-btn .k-inner {
    fill: none;
    stroke: url(#ku-inner);
    stroke-width: 0.6;
    stroke-linejoin: miter;
    stroke-miterlimit: 10;
    opacity: 0.35;
    transition: opacity 0.18s;
}

.karma-btn .k-crease {
    stroke: #2d5a58;
    stroke-width: 0.6;
    opacity: 0.3;
    transition: opacity 0.18s, stroke 0.18s;
}

.karma-btn .k-dot {
    fill: #3a5a58;
    opacity: 0.45;
    transition: all 0.18s;
}

.karma-btn .k-glow {
    fill: none;
    opacity: 0;
}

/* ── Hover: stroke lights up, faint fill tint, crease pulses ── */

.karma-btn:not(.inactive):hover {
    .k-outer {
        stroke: url(#kv-stroke);
        opacity: 1;
    }

    .k-inner {
        stroke: url(#kv-inner);
        opacity: 0.6;
    }

    .k-glow {
        fill: url(#kh-tip);
        opacity: 1;
    }

    .k-crease {
        stroke: #4aada8;
        opacity: 0.55;
        animation: hc-pulse 1.8s ease-in-out infinite;
    }

    .k-dot {
        fill: #4aada8;
        opacity: 0.7;
    }
}

@keyframes hc-pulse {
    0%, 100% {
        opacity: 0.4;
        stroke: #4aada8
    }
    50% {
        opacity: 0.8;
        stroke: #6dccc8
    }
}

/* ── Voted: full fill, crease shimmer, sparks fire ── */

.karma-btn.upvoted .k-outer {
    stroke: url(#kv-stroke);
    fill: url(#kv-fill);
    opacity: 1;
}

.karma-btn.upvoted .k-inner {
    stroke: url(#kv-inner);
    fill: url(#kv-rg);
    opacity: 0.65;
}

.karma-btn.upvoted .k-crease {
    animation: vc-shim 2.2s ease-in-out infinite;
}

.karma-btn.upvoted .k-dot {
    fill: #e8bc68;
    opacity: 0.95;
    r: 1.8px;
}

@keyframes vc-shim {
    0%, 100% {
        opacity: 0.6;
        stroke: #e8722a
    }
    50% {
        opacity: 1;
        stroke: #c0f0ec
    }
}

/* Sparks — hidden unless voted */
.karma-btn .sp {
    opacity: 0;
}

.karma-btn.upvoted .sp {
    animation: sp-rise var(--d, 1.8s) ease-out var(--delay, 0s) infinite;
}

@keyframes sp-rise {
    0% {
        transform: translate(0, 0);
        opacity: 0.9;
    }
    60% {
        opacity: 0.55;
    }
    100% {
        transform: translate(var(--dx, 0px), var(--dy, -14px));
        opacity: 0;
    }
}

/* tip */
.karma-btn .sp1 {
    --d: 1.6s;
    --delay: 0.0s;
    --dx: -2px;
    --dy: -13px;
    fill: #4aada8;
}

.karma-btn .sp2 {
    --d: 1.9s;
    --delay: 0.5s;
    --dx: 3px;
    --dy: -16px;
    fill: #e8bc68;
}

.karma-btn .sp3 {
    --d: 1.5s;
    --delay: 0.9s;
    --dx: -1px;
    --dy: -11px;
    fill: #6dccc8;
}

/* left edge */
.karma-btn .sp4 {
    --d: 2.0s;
    --delay: 0.2s;
    --dx: -8px;
    --dy: -11px;
    fill: #4aada8;
}

.karma-btn .sp5 {
    --d: 1.8s;
    --delay: 0.7s;
    --dx: -9px;
    --dy: -8px;
    fill: #e8722a;
}

.karma-btn .sp6 {
    --d: 1.6s;
    --delay: 1.2s;
    --dx: -6px;
    --dy: -13px;
    fill: #6dccc8;
}

/* right edge */
.karma-btn .sp7 {
    --d: 2.1s;
    --delay: 0.4s;
    --dx: 8px;
    --dy: -11px;
    fill: #e8bc68;
}

.karma-btn .sp8 {
    --d: 1.7s;
    --delay: 1.0s;
    --dx: 10px;
    --dy: -8px;
    fill: #4aada8;
}

.karma-btn .sp9 {
    --d: 1.9s;
    --delay: 0.1s;
    --dx: 6px;
    --dy: -13px;
    fill: #f0e8d8;
}

/* interior */
.karma-btn .sp10 {
    --d: 2.2s;
    --delay: 0.6s;
    --dx: -3px;
    --dy: -14px;
    fill: #e8722a;
}

.karma-btn .sp11 {
    --d: 1.8s;
    --delay: 1.4s;
    --dx: 4px;
    --dy: -13px;
    fill: #6dccc8;
}

.karma-btn .sp12 {
    --d: 2.0s;
    --delay: 0.3s;
    --dx: -5px;
    --dy: -11px;
    fill: #e8bc68;
}

.karma-btn .sp13 {
    --d: 1.7s;
    --delay: 1.1s;
    --dx: 5px;
    --dy: -12px;
    fill: #4aada8;
}