/* EVOAK Mana Widget v3.14.0 - Sakura coin: verfijnde notch-bloem, A halo + C ringen + D wervel, pulserende tipjes (twee halve cirkels), 3.5s */

.evoak-mana-widget {
    display: inline-flex; align-items: center; gap: .5em;
    font-family: Georgia, serif;
    background: #fdf8f0; border: 1px solid #c9a96e; border-radius: 3px;
    padding: .4em .8em; color: #2a1f14;
    transition: all .3s ease;
}
.evoak-mana-widget.evoak-mana-full { padding: .7em 1.4em; font-size: 1.05em; }

/* ============ THE COIN ============ */
.evoak-mana-coin {
    position: relative;
    display: inline-block;
    width: 1.6em; height: 1.6em;
    vertical-align: -.3em;
    flex-shrink: 0;
}
.evoak-mana-coin.lg { width: 5em; height: 5em; }
.evoak-mana-coin.md { width: 2.8em; height: 2.8em; }
.evoak-mana-coin.xs { width: 1.4em; height: 1.4em; vertical-align: -.28em; }

.ev-coin-breath {
    position: absolute; inset: -18%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,215,111,0.5) 0%, rgba(240,120,160,0.28) 50%, transparent 75%);
    animation: ev-breath 3.5s ease-in-out infinite;
    pointer-events: none;
}
.ev-coin-body {
    position: absolute; inset: 0;
    border-radius: 50%; overflow: visible;
    background: none;
}
/* C - frequentie-ringen: zetten uit vanaf de bol (sonar). Siblings van .ev-coin-body
   binnen .evoak-mana-coin (overflow visible) zodat ze buiten de bol kunnen groeien.
   Alleen op lg/md getoond - op kleine inline coins te druk. */
.ev-coin-ring {
    display: none;
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(240, 120, 160, 0.5);
    pointer-events: none;
}
.evoak-mana-coin.lg .ev-coin-ring,
.evoak-mana-coin.md .ev-coin-ring { display: block; }
.ev-coin-ring-1 { animation: ev-ring 3.5s ease-out 0s    infinite; }
.ev-coin-ring-2 { animation: ev-ring 3.5s ease-out 1.17s infinite; border-color: rgba(255, 200, 120, 0.6); }
.ev-coin-ring-3 { animation: ev-ring 3.5s ease-out 2.33s infinite; }

/* Sakura SVG container - notch-bloem, viewBox 100x100, gecentreerd in de bol. */
.ev-coin-drop {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    filter: drop-shadow(0 1px 3px rgba(168, 88, 30, 0.35));
}
/* v3.30 nieuwe coin-animaties (CSS -> werkt ook bij JS-gegenereerde coins) */
.ev-coin-flower { transform-box: fill-box; transform-origin: center; animation: ev-coin-rotate 16s linear infinite; }
.ev-stamen { animation: ev-stamen-pulse 2.8s ease-in-out infinite; }
.ev-coin-glow { opacity: .14; animation: ev-coin-glow 3.6s ease-in-out infinite; }
@keyframes ev-coin-rotate { to { transform: rotate(360deg); } }
@keyframes ev-stamen-pulse { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes ev-coin-glow { 0%,100% { opacity: .08; } 50% { opacity: .22; } }
@media (prefers-reduced-motion: reduce) { .ev-coin-flower, .ev-stamen, .ev-coin-glow { animation: none; } }

/* D - wervelende gloed binnenin (achter de bloem, geklemd in de bol). lg/md only. */
.ev-coin-swirl {
    display: none;
    position: absolute; top: 50%; left: 50%;
    width: 95%; height: 95%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(240,120,160,0), rgba(255,224,150,0.5), rgba(240,120,160,0.3), rgba(255,224,150,0), rgba(240,120,160,0.4), rgba(255,224,150,0));
    animation: ev-swirl 9s linear infinite;
    pointer-events: none;
}
.evoak-mana-coin.lg .ev-coin-swirl,
.evoak-mana-coin.md .ev-coin-swirl { display: block; }

/* Hartslag-kern: roze puls over het hart van de bloem. */
.ev-coin-core {
    position: absolute; top: 50%; left: 50%;
    width: 11%; height: 11%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #ffe4ec 50%, #e85e8a 85%, transparent 100%);
    animation: ev-core 3.5s ease-in-out infinite;
    pointer-events: none;
}

/* Meeldraad-tipjes: pulseren: overstaande tipjes delen hun delay (animation-delay
   inline op elk circle in de SVG) -> twee tegenoverliggende halve-cirkel-golven. */
.ev-tip {
    transform-box: fill-box;
    transform-origin: center;
    fill: #e3a236;
    animation: ev-tip 3.5s ease-in-out infinite;
}

/* Sparks rising around the coin */
.ev-coin-spark {
    position: absolute;
    width: 5%; height: 5%;
    background: radial-gradient(circle, #fff 0%, #ffd8e2 60%, transparent 100%);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255, 216, 226, 0.9);
    pointer-events: none;
    opacity: 0;
}
.ev-coin-spark-1 { top: 20%; left: -8%; animation: ev-spark-1 3.5s ease-in-out infinite; }
.ev-coin-spark-2 { top: 60%; right: -10%; animation: ev-spark-2 3.5s ease-in-out infinite; animation-delay: -1.6s; }
.ev-coin-spark-3 { top: 10%; right: 10%; animation: ev-spark-3 3.5s ease-in-out infinite; animation-delay: -2.6s; }

@keyframes ev-breath {
    0%,100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.22); opacity: 0.5; }
}
@keyframes ev-ring {
    0%   { transform: scale(0.72); opacity: 0.7; }
    100% { transform: scale(1.65); opacity: 0; }
}
@keyframes ev-swirl {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes ev-core {
    0%,100% { transform: translate(-50%, -50%) scale(1);   opacity: 0.5; }
    50%      { transform: translate(-50%, -50%) scale(1.5); opacity: 0.95; }
}
@keyframes ev-tip {
    0%,100% { transform: scale(1);    fill: #e3a236; }
    50%      { transform: scale(2.05); fill: #fff2c8; }
}
@keyframes ev-spark-1 {
    0%   { opacity: 0; transform: translate(0,0) scale(0.4); }
    20%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-20%, -60%) scale(1); }
}
@keyframes ev-spark-2 {
    0%   { opacity: 0; transform: translate(0,0) scale(0.4); }
    20%  { opacity: 1; }
    100% { opacity: 0; transform: translate(30%, -50%) scale(1); }
}
@keyframes ev-spark-3 {
    0%   { opacity: 0; transform: translate(0,0) scale(0.4); }
    20%  { opacity: 1; }
    100% { opacity: 0; transform: translate(15%, -80%) scale(1); }
}

/* xs variant: minder beweging voor visuele rust */
.evoak-mana-coin.xs .ev-coin-spark { display: none; }
.evoak-mana-coin.xs .ev-coin-breath { animation: none; }
.evoak-mana-coin.xs .ev-tip { animation: none; }

/* Inline statisch sakura icoon (in tekst naast getallen) */
.evoak-sakura-icon {
    display: inline-block;
    width: 1.1em; height: 1.1em;
    vertical-align: -0.2em;
    flex-shrink: 0;
}

/* ============ VALUE + LABELS ============ */
.evoak-mana-value {
    font-weight: bold; color: #8a6020;
    font-variant-numeric: tabular-nums; transition: color .3s ease;
}
.evoak-mana-value.evoak-mana-pulse { animation: evoak-mana-pulse 0.8s ease; }
@keyframes evoak-mana-pulse {
    0%   { transform: scale(1); color: #8a6020; }
    40%  { transform: scale(1.4); color: #c94a78; }
    100% { transform: scale(1); color: #8a6020; }
}
.evoak-mana-label { color: #7a6a5a; font-style: italic; font-size: .88em; }
.evoak-mana-shoplink { display: inline-block; margin-left: .6em; font-size: .78em; color: #c94a78; text-decoration: none; font-style: italic; white-space: nowrap; }
.evoak-mana-shoplink:hover { text-decoration: underline; }

/* ============ HISTORY ============ */
.evoak-mana-history { font-family: Georgia, serif; }
.evoak-mana-history-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: .6em 0; border-bottom: 1px solid #f0e8e0; font-size: .9em;
}
.evoak-mana-history-item:last-child { border-bottom: none; }
.evoak-mana-history-item .meta { color: #9a8a7a; font-size: .75em; }
.evoak-mana-history-item .amount { display: inline-flex; align-items: center; gap: .3em; font-weight: bold; }
.evoak-mana-history-item .amount.credit { color: #c94a78; }
.evoak-mana-history-item .amount.debit { color: #aa6a3a; }
.evoak-mana-loading { color: #9a8a7a; font-style: italic; padding: 1em; text-align: center; }

/* ============ COST PREVIEW ============ */
.evoak-mana-cost-preview {
    display: flex; justify-content: space-between; align-items: center;
    background: #fafaf8; border: 1px solid #e0d4c4; border-radius: 3px;
    padding: .9em 1.2em; margin: 1em 0; font-family: Georgia, serif;
}
.evoak-mana-cost-preview .label { color: #7a6a5a; font-size: .85em; }
.evoak-mana-cost-preview .value { color: #2a1f14; font-weight: bold; display: inline-flex; align-items: center; gap: .3em; }
.evoak-mana-cost-preview .after.insufficient { color: #aa3a3a; }
.evoak-mana-cost-preview .after.sufficient { color: #c94a78; }

/* ============ STRIP ============ */
.evoak-mana-strip {
    position: sticky; top: 0; z-index: 50;
    background: linear-gradient(180deg, #fdf8f0, #f8f4ef);
    border-bottom: 1px solid #e0d4c4;
    padding: .7em 1em; text-align: right; margin-bottom: 1.5em;
}


/* v3.32 PNG-munt: geschilderde sakura-munt (traag draaiend) vervangt de SVG-munt overal. */
.evoak-mana-coin .ev-coin-drop,
.evoak-mana-coin .ev-coin-breath,
.evoak-mana-coin .ev-coin-ring,
.evoak-mana-coin .ev-coin-swirl,
.evoak-mana-coin .ev-coin-spark { display: none !important; }
.evoak-mana-coin .ev-coin-body {
    background: url('mana-coin.png') center / contain no-repeat !important;
    border-radius: 0 !important; overflow: visible;
    animation: evoak-coin-spin 60s linear infinite, evoak-coin-breathe 9s ease-in-out infinite;
    filter: drop-shadow(0 0 .12em rgba(255,210,150,.55)) drop-shadow(0 0 .26em rgba(232,120,160,.30));
}
@keyframes evoak-coin-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .evoak-mana-coin .ev-coin-body { animation: none; } }

/* v3.33 trage ademhaling: zachte glow-puls (op .ev-coin-body) + minieme schaal-adem
   (op de container), gesynct op 9s ease-in-out. Parent schaalt, child roteert -> geen
   transform-conflict. Heel zacht, als een trage ademhaling. */
.evoak-mana-coin { animation: evoak-coin-breathe-scale 9s ease-in-out infinite; }
@keyframes evoak-coin-breathe {
    0%, 100% { filter: drop-shadow(0 0 .10em rgba(255,210,150,.40)) drop-shadow(0 0 .20em rgba(232,120,160,.22)); }
    50%      { filter: drop-shadow(0 0 .22em rgba(255,210,150,.72)) drop-shadow(0 0 .42em rgba(232,120,160,.42)); }
}
@keyframes evoak-coin-breathe-scale {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
    .evoak-mana-coin { animation: none; }
    .evoak-mana-coin .ev-coin-body { animation: none; }
}