/* ====================================================================
   Bondgenoot — Munten-widget outgame-variant (FIX-CL-P5.2 · ZP-P5-D)
   --------------------------------------------------------------------
   /assets/css/components/munten-widget.css

   Outgame-variant van de F473 ingame-widget. Geladen ALLEEN door
   /templates/layouts/outgame.tpl.php.

   De base-class .ig-munten-widget zit in /assets/css/layouts/ingame.css
   en wordt daar gestyled voor de donker-perkament ingame-header. Voor
   outgame hebben we andere context (donker hero + licht crème content
   afwisselend) — onderstaande modifier .ig-munten-widget--outgame
   overschrijft de relevante kleurkeuzes zodat het zowel op donkere als
   lichte achtergrond leesbaar is.

   Strategie: een neutrale "ambient gold" — donker rand + transparant-
   donkere binnenkant — die op crème en op donker-rood ongeveer even
   leesbaar is. Single-variant, geen data-context-switch, om geen extra
   JS te vereisen.

   @since FIX-CL-P5.2 (ZP-P5-D)
   ==================================================================== */

/* ---- Base als de widget vrijstaand wordt geladen zonder ingame.css.
   Vereenvoudigd: outgame laadt ingame.css NIET, dus we herhalen de
   base hier. Identieke selectors zodat de visuele identiteit klopt. */
.ig-munten-widget {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    margin-right: 8px;
    border-radius: 999px;
    font-family: var(--font-display, Georgia, serif);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.ig-munten-widget__icon {
    font-size: 16px;
    line-height: 1;
}

.ig-munten-widget__count {
    letter-spacing: 0.02em;
}

/* ---- Outgame-variant: bestand tegen zowel donker hero
   als licht crème content. Donkere rand, semi-transparant donkere
   binnenkant, goud-tekst. */
.ig-munten-widget--outgame {
    background: rgba(40, 22, 12, 0.55);
    border: 1px solid var(--gold-deep, #8C6722);
    color: var(--gold-bright, #D4A656);
}

.ig-munten-widget--outgame:hover,
.ig-munten-widget--outgame:focus {
    background: rgba(184, 137, 61, 0.20);
    box-shadow: 0 0 8px rgba(212, 166, 86, 0.35);
    outline: none;
    color: #F0CC78;
}

/* ---- Pulse-animatie identiek aan ingame (re-declared zodat outgame
   zonder ingame.css ook werkt). */
.ig-munten-widget--pulse {
    animation: ig-munten-pulse-og 1.2s ease-in-out 3;
}

@keyframes ig-munten-pulse-og {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(212, 166, 86, 0.6);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(212, 166, 86, 0);
        transform: scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ig-munten-widget--outgame,
    .ig-munten-widget--pulse {
        transition: none;
        animation: none;
    }
}

/* ---- Mobile-aanpassing: smaller padding op smalle viewports zodat
   widget niet de hoofdnav-flow breekt. */
@media (max-width: 720px) {
    .ig-munten-widget--outgame {
        padding: 4px 8px;
        font-size: 13px;
        margin-right: 4px;
    }
    .ig-munten-widget--outgame .ig-munten-widget__count {
        max-width: 5ch;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}