.echo-item-visual {
    --echo-glow-size: 7px;
    --echo-aura-opacity: 0.12;
    --echo-ornament-opacity: 0;
    --echo-shell-brightness: 0.9;
    --echo-shell-saturation: 0.92;
    --echo-fill-polish: 0.2;
    --echo-essence-color: #D1D5D8;
    position: relative;
    isolation: isolate;
    width: 75%;
    height: 75%;
}

.echo-item-shell,
.echo-rarity-aura,
.echo-essence-fill,
.echo-rarity-ornament {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.echo-item-shell {
    z-index: 4;
    display: block;
    object-fit: contain;
    filter:
        brightness(var(--echo-shell-brightness))
        saturate(var(--echo-shell-saturation))
        drop-shadow(0 5px 4px rgba(0, 0, 0, 0.62));
    transition: filter 0.18s ease;
}

.echo-rarity-aura {
    background: var(--item-rarity);
    -webkit-mask-image: var(--echo-shell-mask);
    mask-image: var(--echo-shell-mask);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.echo-rarity-aura {
    z-index: 0;
    opacity: var(--echo-aura-opacity);
    filter: blur(calc(var(--echo-glow-size) * 1.35));
    transform: scale(1.025);
}

.echo-essence-fill {
    z-index: 2;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--echo-essence-color) 62%, white) 0%,
            var(--echo-essence-color) 48%,
            color-mix(in srgb, var(--echo-essence-color) 68%, #020809) 100%
        );
    -webkit-mask-image: var(--echo-fill-mask);
    mask-image: var(--echo-fill-mask);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.echo-fill-surface {
    position: absolute;
    inset: -20%;
    display: block;
    opacity: calc(0.52 + var(--echo-fill-polish));
    background:
        radial-gradient(circle at 32% 78%, color-mix(in srgb, var(--echo-essence-color) 42%, white) 0 5%, transparent 18%),
        radial-gradient(circle at 68% 42%, color-mix(in srgb, var(--echo-essence-color) 32%, white) 0 4%, transparent 16%),
        linear-gradient(145deg, transparent 28%, color-mix(in srgb, var(--echo-essence-color) 45%, white) 48%, transparent 68%);
    mix-blend-mode: screen;
    transform-box: fill-box;
    transform-origin: center;
}

.echo-rarity-ornament {
    z-index: 1;
    inset: 8%;
    width: 84%;
    height: 84%;
    opacity: var(--echo-ornament-opacity);
    border: 1px solid color-mix(in srgb, var(--item-rarity) 60%, white);
    border-radius: 50%;
    box-shadow:
        0 0 10px color-mix(in srgb, var(--item-rarity) 38%, transparent),
        inset 0 0 12px color-mix(in srgb, var(--item-rarity) 18%, transparent);
}

.echo-rarity-ornament::before,
.echo-rarity-ornament::after {
    position: absolute;
    top: 50%;
    width: 5px;
    height: 5px;
    content: '';
    border: 1px solid color-mix(in srgb, var(--item-rarity) 58%, white);
    background: var(--item-rarity);
    box-shadow: 0 0 7px var(--item-rarity);
    transform: translateY(-50%) rotate(45deg);
}

.echo-rarity-ornament::before { left: -3px; }
.echo-rarity-ornament::after { right: -3px; }

.echo-unknown-mark {
    position: absolute;
    z-index: 6;
    left: 50%;
    top: 55%;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    color: #eefcff;
    border: 1px solid rgba(238, 252, 255, 0.5);
    border-radius: 50%;
    background: rgba(3, 10, 13, 0.82);
    font-weight: 950;
    transform: translate(-50%, -50%);
}

.echo-item-visual[data-rarity="uncommon"] {
    --echo-glow-size: 9px;
    --echo-aura-opacity: 0.15;
    --echo-ornament-opacity: 0.08;
    --echo-shell-brightness: 0.94;
    --echo-shell-saturation: 0.98;
    --echo-fill-polish: 0.26;
}

.echo-item-visual[data-rarity="rare"] {
    --echo-glow-size: 11px;
    --echo-aura-opacity: 0.19;
    --echo-ornament-opacity: 0.2;
    --echo-shell-brightness: 0.98;
    --echo-shell-saturation: 1.02;
    --echo-fill-polish: 0.32;
}

.echo-item-visual[data-rarity="epic"] {
    --echo-glow-size: 13px;
    --echo-aura-opacity: 0.23;
    --echo-ornament-opacity: 0.36;
    --echo-shell-brightness: 1.03;
    --echo-shell-saturation: 1.06;
    --echo-fill-polish: 0.4;
}

.echo-item-visual[data-rarity="legendary"] {
    --echo-glow-size: 16px;
    --echo-aura-opacity: 0.3;
    --echo-ornament-opacity: 0.62;
    --echo-shell-brightness: 1.09;
    --echo-shell-saturation: 1.1;
    --echo-fill-polish: 0.48;
}

.echo-item-visual[data-rarity="mythic"] {
    --echo-glow-size: 19px;
    --echo-aura-opacity: 0.36;
    --echo-ornament-opacity: 0.88;
    --echo-shell-brightness: 1.14;
    --echo-shell-saturation: 1.16;
    --echo-fill-polish: 0.58;
}

.echo-type-ranged .echo-fill-surface {
    background:
        linear-gradient(90deg, transparent 42%, color-mix(in srgb, var(--echo-essence-color) 36%, white) 48% 52%, transparent 58%),
        radial-gradient(ellipse at center, transparent 0 16%, color-mix(in srgb, var(--echo-essence-color) 42%, white) 18% 22%, transparent 25%);
}

.echo-type-poisoner .echo-fill-surface {
    background:
        radial-gradient(circle at 34% 76%, color-mix(in srgb, var(--echo-essence-color) 45%, white) 0 4%, transparent 5%),
        radial-gradient(circle at 65% 58%, color-mix(in srgb, var(--echo-essence-color) 40%, white) 0 3%, transparent 4%),
        radial-gradient(circle at 48% 35%, color-mix(in srgb, var(--echo-essence-color) 35%, white) 0 2.5%, transparent 3.5%);
}

.echo-type-aoe .echo-fill-surface {
    background: repeating-radial-gradient(circle at center, color-mix(in srgb, var(--echo-essence-color) 42%, white) 0 3%, transparent 5% 14%);
}

.echo-type-bruiser .echo-fill-surface {
    background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--echo-essence-color) 30%, white) 0 6%, transparent 8% 20%);
}

.echo-type-assassin .echo-fill-surface {
    background: linear-gradient(145deg, transparent 36%, color-mix(in srgb, var(--echo-essence-color) 55%, white) 42% 48%, transparent 54%);
}

.echo-type-striker .echo-fill-surface {
    background: repeating-linear-gradient(155deg, transparent 0 18%, color-mix(in srgb, var(--echo-essence-color) 46%, white) 20% 25%, transparent 28% 44%);
}

.echo-type-counter-tank .echo-fill-surface {
    background:
        conic-gradient(from 25deg at center, transparent, color-mix(in srgb, var(--echo-essence-color) 36%, white), transparent 26%),
        radial-gradient(circle, color-mix(in srgb, var(--echo-essence-color) 28%, white), transparent 52%);
}

.echo-type-juggernaut .echo-fill-surface {
    background:
        radial-gradient(circle at 50% 64%, color-mix(in srgb, var(--echo-essence-color) 58%, white) 0 7%, transparent 19%),
        linear-gradient(0deg, color-mix(in srgb, var(--echo-essence-color) 32%, #020809), transparent 54%);
}

.echo-type-healer .echo-fill-surface {
    background:
        radial-gradient(circle at 35% 72%, color-mix(in srgb, var(--echo-essence-color) 52%, white) 0 3%, transparent 5%),
        radial-gradient(circle at 63% 54%, color-mix(in srgb, var(--echo-essence-color) 46%, white) 0 3%, transparent 5%),
        linear-gradient(0deg, color-mix(in srgb, var(--echo-essence-color) 30%, white), transparent 62%);
}

.echo-type-chaotic .echo-fill-surface {
    background: conic-gradient(from 40deg, color-mix(in srgb, var(--echo-essence-color) 38%, white), transparent 18%, color-mix(in srgb, var(--echo-essence-color) 62%, white) 34%, transparent 55%, var(--echo-essence-color));
}

.echo-motion-strike .echo-fill-surface { animation: echo-raster-strike 3.2s ease-in-out infinite; }
.echo-motion-focus .echo-fill-surface { animation: echo-raster-focus 3.8s ease-in-out infinite; }
.echo-motion-bubble .echo-fill-surface { animation: echo-raster-rise 3.5s ease-in-out infinite; }
.echo-motion-expand .echo-fill-surface { animation: echo-raster-expand 4s ease-in-out infinite; }
.echo-motion-heavy .echo-fill-surface { animation: echo-raster-heavy 4.2s ease-in-out infinite; }
.echo-motion-dart .echo-fill-surface { animation: echo-raster-dart 2.8s ease-in-out infinite; }
.echo-motion-cleave .echo-fill-surface { animation: echo-raster-cleave 3.3s ease-in-out infinite; }
.echo-motion-roots .echo-fill-surface { animation: echo-raster-roots 4.6s ease-in-out infinite; }
.echo-motion-core .echo-fill-surface { animation: echo-raster-core 4.2s ease-in-out infinite; }
.echo-motion-rise .echo-fill-surface { animation: echo-raster-rise 3.9s ease-in-out infinite; }
.echo-motion-chaos .echo-fill-surface { animation: echo-raster-chaos 3.1s steps(4, end) infinite; }

.bag-unknown-visual {
    position: relative;
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.52));
}

.unknown-item-body {
    position: relative;
    display: grid;
    width: 62%;
    aspect-ratio: 1;
    place-items: center;
    border: 2px solid color-mix(in srgb, var(--item-rarity) 50%, #9cb9be);
    background: linear-gradient(135deg, color-mix(in srgb, var(--item-rarity) 16%, #1a292d), #0b1518);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.5), 0 0 14px color-mix(in srgb, var(--item-rarity) 22%, transparent);
    transform: rotate(45deg);
}

.unknown-item-mark {
    color: var(--item-rarity);
    font-size: 1.6rem;
    font-weight: 950;
    text-shadow: 0 0 8px var(--item-rarity);
    transform: rotate(-45deg);
}

@keyframes echo-raster-strike {
    0%, 74%, 100% { opacity: 0.62; transform: translate(0); }
    80% { opacity: 1; transform: translate(-3%, 1%) scale(1.04); }
    87% { opacity: 0.76; transform: translate(3%, -1%) scale(0.98); }
}

@keyframes echo-raster-focus {
    0%, 100% { opacity: 0.48; transform: scaleX(0.88); }
    48%, 55% { opacity: 1; transform: scaleX(1.04); }
}

@keyframes echo-raster-rise {
    0%, 100% { opacity: 0.48; transform: translateY(8%); }
    50% { opacity: 0.96; transform: translateY(-8%); }
}

@keyframes echo-raster-expand {
    0%, 100% { opacity: 0.48; transform: scale(0.88); }
    50% { opacity: 1; transform: scale(1.08); }
}

@keyframes echo-raster-heavy {
    0%, 100% { opacity: 0.55; transform: translateY(-2%) scaleY(1); }
    55% { opacity: 0.9; transform: translateY(7%) scaleY(0.92); }
}

@keyframes echo-raster-dart {
    0%, 100% { opacity: 0.42; transform: translate(-9%, 9%); }
    46% { opacity: 1; transform: translate(9%, -9%); }
    54% { opacity: 0.3; transform: translate(12%, -12%); }
}

@keyframes echo-raster-cleave {
    0%, 100% { opacity: 0.48; transform: translate(-7%, 4%); }
    50% { opacity: 1; transform: translate(7%, -4%); }
}

@keyframes echo-raster-roots {
    0%, 100% { opacity: 0.52; transform: rotate(-1deg) scaleY(0.96); }
    50% { opacity: 0.92; transform: rotate(1deg) scaleY(1.04); }
}

@keyframes echo-raster-core {
    0%, 100% { opacity: 0.5; transform: scale(0.92); }
    50% { opacity: 1; transform: scale(1.08); }
}

@keyframes echo-raster-chaos {
    0%, 100% { opacity: 0.48; transform: translate(-4%, 3%) rotate(-3deg); }
    25% { opacity: 1; transform: translate(5%, -4%) rotate(4deg); }
    50% { opacity: 0.62; transform: translate(-3%, -5%) rotate(1deg); }
    75% { opacity: 0.88; transform: translate(4%, 4%) rotate(-5deg); }
}

@media (prefers-reduced-motion: reduce) {
    .echo-item-visual .echo-fill-surface {
        animation: none;
    }
}