.element-power-bar{--element:#a69b91;display:flex;gap:18px;align-items:center;position:relative;padding:20px 16px;margin-bottom:25px;border:1px solid color-mix(in srgb,var(--element) 55%,#251718);border-radius:10px;background:radial-gradient(ellipse at left,color-mix(in srgb,var(--element) 12%,#0a0809),#080708 80%);overflow:hidden}.element-fire{--element:#ec8053}.element-ice{--element:#8bd7f0}.element-dark{--element:#a38bd4}.element-wind{--element:#9fcbb7}.element-earth{--element:#c1a778}.element-power-bar small{display:block;font-size:8px;letter-spacing:.16em;color:#a38d84}.element-power-bar strong{font:23px Georgia,serif;color:#dfc8b7;display:block;margin-top:6px}.element-power-bar>b{margin-left:auto;font-size:24px;color:var(--element);white-space:nowrap}.element-orb{display:grid;place-items:center;width:66px;height:66px;flex-shrink:0;border:1px solid var(--element);border-radius:50%;color:var(--element);position:relative;box-shadow:0 0 22px color-mix(in srgb,var(--element) 20%,transparent)}.element-orb svg{width:43px;height:43px;filter:drop-shadow(0 0 5px currentColor);animation:elementFloat 4s ease-in-out infinite}.element-orb i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--element);animation:elementSpark 3s ease-out infinite;left:25%;top:80%}.element-orb i:nth-of-type(2){left:70%;animation-delay:-1s}.element-orb i:nth-of-type(3){left:50%;animation-delay:-2s}.element-fire svg{animation:elementFlame 2.5s ease-in-out infinite}.element-wind svg{animation:elementBreeze 3s ease-in-out infinite}.element-dark .element-orb{animation:elementDark 4s ease-in-out infinite}.element-none *{animation:none!important}.element-none i{display:none}@keyframes elementFloat{50%{transform:translateY(-4px) rotate(4deg)}}@keyframes elementFlame{50%{transform:scale(.9,1.08) translateY(-2px);filter:drop-shadow(0 0 10px #ef5629)}}@keyframes elementBreeze{50%{transform:translateX(5px);opacity:.6}}@keyframes elementSpark{0%{transform:translateY(0);opacity:0}35%{opacity:1}100%{transform:translateY(-65px);opacity:0}}@keyframes elementDark{50%{box-shadow:0 0 30px #9766b44a}}.motion-paused .element-orb,.motion-paused .element-orb *{animation-play-state:paused!important}@media(prefers-reduced-motion:reduce){.element-orb,.element-orb *{animation:none!important}}@media(max-width:600px){.element-power-bar{gap:12px;padding:15px 10px}.element-orb{width:52px;height:52px}.element-power-bar strong{font-size:19px}.element-power-bar>b{font-size:20px}}
