/* P11 — Four playful, real-balance jars. All filling uses server state; CSS draws only. */
.li-joy-card{--li-joy-bg:#effbf4;--li-joy-liquid:#58c98f;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0;min-height:190px;border:2px solid #d1e9dd;border-radius:21px;padding:13px 8px;background:linear-gradient(145deg,#fff,var(--li-joy-bg));color:#60466a;cursor:pointer;box-shadow:0 6px 0 #c8ded0,0 12px 18px #55415a15;touch-action:manipulation;transition:transform .18s cubic-bezier(.2,.8,.3,1.2),box-shadow .18s}
.li-joy-invest{--li-joy-bg:#f4ebff;--li-joy-liquid:#a688ed;border-color:#ddcdf4}
.li-joy-spend{--li-joy-bg:#fff0f7;--li-joy-liquid:#f29fc9;border-color:#eed0e1}
.li-joy-give{--li-joy-bg:#fff4df;--li-joy-liquid:#f7bf61;border-color:#eeddb9}
.li-joy-card:hover{transform:translateY(-5px) rotate(-1deg);box-shadow:0 11px 0 #dfcfe3,0 18px 21px #55415a17}
.li-joy-card:active{transform:translateY(4px) scale(.97);box-shadow:0 2px 0 #dfcfe3}
.li-joy-card:focus-visible,.bank-illustration-open:focus-visible,.bank-explore-btn:focus-visible{outline:4px solid #8152ae;outline-offset:3px}
.li-joy-jar{position:relative;width:84px;height:98px;display:block;flex-shrink:0;filter:drop-shadow(0 5px 4px #573e5921)}
.li-joy-glass{position:absolute;inset:13px 9px 2px;border:4px solid #ae94ae;border-radius:13px 13px 24px 24px;background:linear-gradient(120deg,#fffdfcdd,#fff5ee9c);overflow:hidden;box-shadow:inset 5px 1px 3px #fff8,0 2px 0 #fff}
.li-joy-glass::after{content:"";position:absolute;top:5px;bottom:11px;left:8px;width:7px;background:#fff9;border-radius:99px;transform:skewY(-11deg);pointer-events:none}
.li-joy-cap{position:absolute;top:8px;left:4px;right:4px;height:16px;border:3px solid #9a7795;border-radius:10px 10px 5px 5px;background:linear-gradient(#ead8ee,#c9abc9);z-index:3}
.li-joy-liquid{position:absolute;inset:auto 0 0;height:var(--li-jar-final,0%);border-radius:7px 7px 15px 15px;background:linear-gradient(180deg,color-mix(in srgb,var(--li-joy-liquid),white 38%),var(--li-joy-liquid));animation:li-joy-fill .95s cubic-bezier(.2,.75,.3,1) both}
.li-joy-liquid::before{content:"";position:absolute;left:-8%;top:-4px;width:116%;height:10px;border-radius:50%;background:#fff8}
.li-joy-bubbles i{position:absolute;bottom:15%;width:7px;height:7px;border-radius:50%;background:#fff9;left:25%;animation:li-joy-bubble 3.8s ease-in infinite}
.li-joy-bubbles i:nth-child(2){left:54%;bottom:8%;width:5px;height:5px;animation-delay:.85s}
.li-joy-bubbles i:nth-child(3){left:70%;bottom:17%;width:4px;height:4px;animation-delay:1.6s}
.li-joy-coin{position:absolute;z-index:2;color:#ffe168;text-shadow:0 2px #d4a655;font-size:19px;left:31%;bottom:8%;opacity:.92;transform:rotate(-15deg)}
.li-joy-coin.two{left:59%;bottom:14%;transform:rotate(22deg)}
.li-joy-face{position:absolute;z-index:2;top:12px;left:50%;transform:translateX(-50%);font-size:21px;color:#88667d;font-weight:950}
.li-joy-symbol{position:absolute;right:-8px;top:11px;z-index:4;font-size:24px;filter:drop-shadow(0 2px 1px #7a586339);animation:li-joy-idle 3.4s ease-in-out infinite}
.li-joy-card-title{font:750 16px "Fredoka",system-ui,sans-serif;line-height:1.1}
.li-joy-sum{font:800 clamp(15px,2vw,19px) "Fredoka",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.li-joy-progress{display:block;width:92%;height:12px;border:2px solid white;background:#e9e6ec;box-shadow:inset 0 1px 3px #60466a21;border-radius:99px;overflow:hidden}
.li-joy-progress i{display:block;height:100%;width:var(--li-jar-final,0%);background:var(--li-joy-liquid);border-radius:99px;animation:li-joy-progress 1.05s ease-out both}
.li-joy-motto{font-size:11px;color:#745c76;line-height:1.25;font-weight:800}
.kid-v9 .kid-mini-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.kid-v9 .kid-mini-grid .li-joy-card{display:flex;flex-direction:column;justify-content:center;justify-items:initial;min-height:170px;padding:9px 4px;border-width:2px}
.kid-v9 .kid-mini-grid .li-joy-jar{transform:scale(.83);margin:-7px 0 -8px}
.kid-v9 .kid-mini-grid .li-joy-card-title{font-size:12px}
.kid-v9 .kid-mini-grid .li-joy-sum{font-size:12px}
.parent-p10-jar-row .li-joy-card{min-height:193px;max-width:100%;font-family:inherit}
.parent-p10-jar-row .li-joy-card-title{font-size:14px}
.li-parent-jar-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.li-parent-jar-cell{--li-joy-liquid:#58c98f;--li-joy-bg:#f3fff6;display:grid;justify-items:center;gap:6px;padding:13px 8px;border:2px solid #e6d8e7;border-radius:18px;background:var(--li-joy-bg)}
.li-parent-jar-cell[data-bucket="invest"]{--li-joy-liquid:#a688ed;--li-joy-bg:#f7f0ff}
.li-parent-jar-cell[data-bucket="spend"]{--li-joy-liquid:#f29fc9;--li-joy-bg:#fff1f7}
.li-parent-jar-cell[data-bucket="give"]{--li-joy-liquid:#f7bf61;--li-joy-bg:#fff6e7}
.li-parent-jar-cell>span:not(.li-joy-jar){font-size:12px;font-weight:850;color:#71567a}
.li-parent-jar-cell>b{font-size:17px;color:#62456e;font-variant-numeric:tabular-nums}
.li-parent-jar-cell>small{color:#836e83;font-weight:750}
.kid-v9 .creature-bank[data-jar-kid]{--li-joy-liquid:#58c98f;position:relative;overflow:visible;transition:transform .18s ease}
.kid-v9 .creature-bank[data-bucket="invest"]{--li-joy-liquid:#a688ed}
.kid-v9 .creature-bank[data-bucket="spend"]{--li-joy-liquid:#f29fc9}
.kid-v9 .creature-bank[data-bucket="give"]{--li-joy-liquid:#f7bf61}
.kid-v9 .creature-bank[data-jar-kid]:hover .animal-bank-svg{animation:li-joy-idle 1.6s ease-in-out infinite}
.kid-v9 .coin-jar-fill{height:var(--li-jar-final,0%);animation:li-joy-fill .95s ease-out both}
.li-coin-bubbles i{position:absolute;width:5px;height:5px;background:#fff;border-radius:50%;bottom:12%;left:20%;opacity:.8;animation:li-joy-bubble 4s ease-in infinite}
.li-coin-bubbles i:nth-child(2){left:58%;animation-delay:1s}
.li-coin-bubbles i:nth-child(3){left:76%;animation-delay:2s}
[data-jar-kid].li-joy-up{animation:li-joy-gain .8s cubic-bezier(.2,.7,.2,1.2) 1!important}
[data-jar-kid].li-joy-down{animation:li-joy-spend .62s ease-in-out 1!important}
@keyframes li-joy-fill{from{height:0}to{height:var(--li-jar-final,0%)}}
@keyframes li-joy-progress{from{width:0}to{width:var(--li-jar-final,0%)}}
@keyframes li-joy-bubble{0%{transform:translateY(12px);opacity:0}20%{opacity:.8}90%{opacity:.4}100%{transform:translateY(-45px);opacity:0}}
@keyframes li-joy-idle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(3deg)}}
@keyframes li-joy-gain{0%,100%{filter:none;transform:none}40%{filter:drop-shadow(0 0 13px #71d263b5);transform:translateY(-7px) scale(1.045)}}
@keyframes li-joy-spend{0%,100%{filter:none;transform:none}50%{filter:brightness(.94);transform:scale(.96)}}
@media(max-width:770px){.kid-v9 .banks,.li-parent-jar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.parent-p10-jar-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:400px){.li-joy-card{padding:10px 4px}.li-joy-motto{font-size:10px}.kid-v9 .kid-mini-grid{gap:5px}.kid-v9 .kid-mini-grid .li-joy-jar{transform:scale(.69);margin:-13px 0 -14px}.kid-v9 .kid-mini-grid .li-joy-card-title{font-size:10px}.kid-v9 .kid-mini-grid .li-joy-sum{font-size:10px}}
@media(prefers-reduced-motion:reduce){
 .li-joy-liquid,.li-joy-progress i,.li-joy-symbol,.li-joy-bubbles i,.li-coin-bubbles i,
 .kid-v9 .coin-jar-fill,[data-jar-kid].li-joy-up,[data-jar-kid].li-joy-down,
 .kid-v9 .creature-bank[data-jar-kid]:hover .animal-bank-svg{animation:none!important}
 .li-joy-card,.kid-v9 .creature-bank[data-jar-kid]{transition:none!important}
 .li-joy-card:hover,.li-joy-card:active{transform:none!important}
}

/* Preserve component internals against the older generic .mini-jar span rule. */
.kid-v9 .kid-mini-grid .li-joy-card .li-joy-face{font-size:20px}
.kid-v9 .kid-mini-grid .li-joy-card .li-joy-symbol{font-size:22px}
.kid-v9 .kid-mini-grid .li-joy-card .li-joy-progress{font-size:inherit}
.kid-v9 .kid-mini-grid .li-joy-card .li-joy-bubbles{font-size:inherit}