#card-effects{position:absolute;right:3%;top:24%;z-index:7;display:grid;grid-auto-flow:column;grid-auto-columns:calc(var(--card-unit,1vw)*11);gap:calc(var(--card-unit,1vw)*2.8);pointer-events:none}
#card-effects[hidden]{display:none}
#card-effects::before{content:'CARTAS ACTIVAS';position:absolute;right:calc(var(--card-unit,1vw)*-1);top:calc(var(--card-unit,1vw)*-6);white-space:nowrap;color:#eaffd4;font:900 calc(var(--card-unit,1vw)*2.3) Arial,sans-serif;letter-spacing:calc(var(--card-unit,1vw)*.15);text-shadow:0 1px 3px #000}
.card-effect{position:relative;width:calc(var(--card-unit,1vw)*11);height:calc(var(--card-unit,1vw)*11);border:2px solid var(--rarity);border-radius:calc(var(--card-unit,1vw)*2.3);background:linear-gradient(#012314cc,#00190de8),url('assets/ui/cartas/plantilla.webp') center/cover;box-shadow:0 0 5px color-mix(in srgb,var(--rarity) 65%,transparent),inset 0 0 5px #0008}
.card-effect img{position:absolute;inset:2%;width:96%;height:96%;object-fit:contain;filter:drop-shadow(0 1px 1px #000)}
.card-effect-count{position:absolute;bottom:calc(var(--card-unit,1vw)*-1.8);right:calc(var(--card-unit,1vw)*-1);background:#042116;min-width:calc(var(--card-unit,1vw)*6.9);padding:calc(var(--card-unit,1vw)*.5) calc(var(--card-unit,1vw)*1);color:#fff;border:1.5px solid var(--rarity);border-radius:calc(var(--card-unit,1vw)*1.8);font:900 calc(var(--card-unit,1vw)*2.56)/1 Arial,sans-serif;text-align:center}
.card-effect.cooling img{opacity:.55}
.card-effect.cooling .card-effect-count{inset:0;display:grid;place-items:center;background:none;border:none;border-radius:50%;font-size:calc(var(--card-unit,1vw)*3.6);white-space:nowrap;min-width:0;padding:0;text-shadow:0 2px 4px #000,0 0 5px #000}
.card-effect.cooling::after{content:'';position:absolute;inset:calc(var(--card-unit,1vw)*.8);border:2px solid #ffffff40;border-top-color:var(--rarity);border-right-color:var(--rarity);border-radius:50%}
.card-effect.ready .card-effect-count{color:#b8ff26}

#card-effects.card-effects-scrollable{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;pointer-events:auto;padding:calc(var(--card-unit)*1) calc(var(--card-unit)*1) calc(var(--card-unit)*2);scrollbar-width:thin;scrollbar-color:#a5d65b #052214}
#card-effects.card-effects-scrollable::before{display:none}
.card-effect.passive .card-effect-count{font-size:calc(var(--card-unit)*2.35)}