.black-hole-effect {
    position: fixed;
    z-index: 1070;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.black-hole-effect__circle {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 128px;
    height: 128px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    transform: translate(-50%, -50%) scale(var(--black-hole-scale));
    will-change: opacity, transform;
    animation: black-hole-collapse var(--black-hole-duration) cubic-bezier(0.72, 0, 0.82, 0.32) both;
}

.black-hole-effect__twinkle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.88rem;
    height: 2.88rem;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
    animation: black-hole-twinkle var(--black-hole-duration) linear both;
}

.black-hole-effect__twinkle::before,
.black-hole-effect__twinkle::after {
    position: absolute;
    top: 50%;
    left: 50%;
    background: #e9fdff;
    box-shadow: 0 0 0.5rem #89f5ff;
    content: "";
    transform: translate(-50%, -50%);
}

.black-hole-effect__twinkle::before {
    width: 100%;
    height: 2px;
}

.black-hole-effect__twinkle::after {
    width: 2px;
    height: 100%;
}

.black-hole-effect--opening .black-hole-effect__circle,
.black-hole-effect--opening .black-hole-effect__twinkle {
    animation-direction: reverse;
}

.black-hole-effect--opening .black-hole-effect__twinkle {
    display: none;
}

@keyframes black-hole-collapse {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(var(--black-hole-scale));
    }

    22.22% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(var(--black-hole-scale));
    }

    78% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(var(--black-hole-scale-mid));
    }

    93% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(var(--black-hole-scale-point));
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.001);
    }
}

@keyframes black-hole-twinkle {
    0%,
    78% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
    }

    86% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15) rotate(45deg);
    }

    93% {
        opacity: 0.78;
        transform: translate(-50%, -50%) scale(0.7) rotate(75deg);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5) rotate(90deg);
    }
}

.frost-nova-effect {
    position: fixed;
    z-index: 1060;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.frost-nova-effect__ring {
    position: absolute;
    display: block;
    width: 128px;
    height: 128px;
    opacity: 0;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    transform: translate(-50%, -50%) scale(0.001);
    will-change: opacity, transform;
}

.frost-nova-effect__particle {
    position: absolute;
    display: block;
    opacity: 0;
    transform: translate(-50%, -50%);
    transform-origin: center;
    will-change: opacity, transform;
}

.ability-targeting-reticle {
    position: fixed;
    z-index: 1900;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    will-change: transform;
}

.ability-targeting-reticle__ring {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    filter:
        drop-shadow(0 0 0.16rem color-mix(in srgb, var(--reticle-glow) 92%, transparent))
        drop-shadow(0 0 0.42rem color-mix(in srgb, var(--reticle-glow) 72%, transparent));
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    transform: translate(-50%, -50%) scale(0.92);
    animation: ability-targeting-reticle-pulse 900ms ease-in-out infinite;
}

@keyframes ability-targeting-reticle-pulse {
    0%,
    100% {
        opacity: 0.62;
        transform: translate(-50%, -50%) scale(0.92);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08);
    }
}

.hirewall-effect {
    position: fixed;
    z-index: 1050;
    right: 0;
    bottom: -180px;
    left: 0;
    height: 180px;
    overflow: hidden;
    pointer-events: none;
    transform: translateZ(0);
    will-change: transform, opacity;
}

.hirewall-effect__fire-viewport {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    contain: strict;
    image-rendering: pixelated;
    transform: scale(var(--hirewall-pixel-scale));
    transform-origin: top left;
}

.hirewall-effect__fire {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    image-rendering: pixelated;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    animation: hirewall-fire-frames var(--hirewall-frame-cycle) steps(20, end) infinite;
}

@keyframes hirewall-fire-frames {
    to {
        transform: translate3d(0, -100%, 0);
    }
}

.hirewall-singe-overlay {
    position: fixed;
    z-index: 1040;
    contain: layout paint;
    opacity: 0;
    pointer-events: none;
    animation: hirewall-singe-fade 2200ms ease-out forwards;
}

.hirewall-singe-overlay--border {
    border: 1px solid rgba(255, 247, 174, 0.96);
    background: transparent;
}

@keyframes hirewall-singe-fade {
    0% {
        opacity: 1;
    }

    14% {
        opacity: 0.82;
    }

    100% {
        opacity: 0;
    }
}

.ability-dock {
    position: fixed;
    z-index: 1400;
    right: 0;
    bottom: clamp(2.35rem, calc(2vw + 1.6rem), 2.85rem);
    left: 0;
    display: flex;
    width: min(calc(100% - 2rem), 66rem);
    margin-inline: auto;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0.65rem;
    pointer-events: none;
}

.ability-dock[hidden],
.ability-slot[hidden],
.ability-button[hidden] {
    display: none;
}

.ability-slot {
    position: relative;
    flex: 0 0 5.6rem;
    width: 5.6rem;
    pointer-events: auto;
}

.ability-tooltip {
    position: absolute;
    z-index: 2000;
    bottom: calc(100% + 0.65rem);
    left: 0;
    width: min(19rem, calc(100vw - 2rem));
    padding: 0.72rem 0.78rem;
    border: 1px solid color-mix(in srgb, var(--engineering) 48%, var(--rule));
    border-radius: 0.52rem;
    background: color-mix(in srgb, var(--surface-raised) 98%, transparent);
    box-shadow:
        0 0.65rem 1.4rem rgba(0, 0, 0, 0.42),
        0 0 0.7rem color-mix(in srgb, var(--engineering) 12%, transparent);
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.35rem);
    transition:
        opacity 140ms ease-out,
        transform 140ms ease-out,
        visibility 0s linear 140ms;
    visibility: hidden;
}

.ability-slot:hover .ability-tooltip,
.ability-slot:focus-within .ability-tooltip {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
    visibility: visible;
}

.ability-tooltip p {
    display: grid;
    margin: 0;
    gap: 0.12rem;
}

.ability-tooltip p + p {
    margin-top: 0.48rem;
    padding-top: 0.42rem;
    border-top: 1px solid color-mix(in srgb, var(--rule) 76%, transparent);
}

.ability-tooltip strong {
    color: var(--engineering);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.ability-tooltip span {
    color: var(--text);
    font-size: 0.74rem;
    line-height: 1.35;
}

.ability-button {
    position: relative;
    z-index: 1400;
    display: grid;
    width: 5.6rem;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    grid-template-rows: minmax(0, 1fr) auto 0.8rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--engineering) 58%, var(--rule));
    border-radius: 0.65rem;
    background:
        radial-gradient(circle at 22% 0%, color-mix(in srgb, var(--engineering) 20%, transparent), transparent 72%),
        color-mix(in srgb, var(--surface-raised) 96%, transparent);
    box-shadow:
        0 0.45rem 1rem rgba(0, 0, 0, 0.34),
        inset 0 0 0 color-mix(in srgb, var(--engineering) 0%, transparent);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    line-height: 1.15;
    pointer-events: auto;
    text-align: left;
    user-select: none;
    transition:
        border-color 180ms ease-in-out,
        box-shadow 180ms ease-in-out,
        filter 180ms ease-in-out,
        transform 180ms ease-in-out;
}

.ability-button:hover,
.ability-button:focus-visible {
    border-color: color-mix(in srgb, var(--engineering) 88%, white);
    box-shadow:
        0 0.55rem 1.2rem rgba(0, 0, 0, 0.4),
        inset 0 0 1rem color-mix(in srgb, var(--engineering) 12%, transparent),
        0 0 0.8rem color-mix(in srgb, var(--engineering) 22%, transparent);
    outline: none;
    transform: translateY(-0.12rem);
}

.ability-button:disabled {
    border-color: color-mix(in srgb, var(--engineering) 24%, var(--rule));
    box-shadow: 0 0.35rem 0.8rem rgba(0, 0, 0, 0.3);
    color: var(--muted);
    cursor: not-allowed;
    filter: saturate(0.55);
    transform: none;
}

.ability-button--active[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--next) 78%, white);
    box-shadow:
        0 0.55rem 1.2rem rgba(0, 0, 0, 0.4),
        inset 0 0 1rem color-mix(in srgb, var(--next) 22%, transparent),
        0 0 0.9rem color-mix(in srgb, var(--next) 32%, transparent);
    animation: ability-active-pulse 1500ms ease-in-out infinite;
}

.ability-button[data-ability="black-hole"] .ability-button__icon {
    background:
        radial-gradient(ellipse 90% 80% at 50% 50%, rgba(126, 64, 190, 0.32), transparent 68%),
        #070810;
}

.ability-button[data-ability="frost-nova"] .ability-button__icon {
    background:
        radial-gradient(ellipse 100% 90% at 50% 54%, rgba(126, 238, 255, 0.32), transparent 64%),
        #071827;
}

.ability-button__icon {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--engineering) 36%, var(--rule));
    background:
        radial-gradient(ellipse 110% 90% at 50% 100%, rgba(255, 210, 72, 0.46), rgba(255, 91, 10, 0.22) 44%, transparent 78%),
        linear-gradient(to top, rgba(255, 79, 8, 0.18), transparent 88%);
    image-rendering: pixelated;
}

.ability-button__name {
    min-width: 0;
    overflow: hidden;
    padding: 0.24rem 0.42rem 0.18rem;
    font-size: 0.96rem;
    line-height: 1;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
}

.ability-button__hotkey {
    position: absolute;
    top: 0.36rem;
    right: 0.38rem;
    display: grid;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--engineering) 42%, var(--rule));
    border-radius: 0.28rem;
    background: rgba(8, 11, 16, 0.58);
    color: color-mix(in srgb, var(--engineering) 72%, var(--text));
    font-family: inherit;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1;
    place-items: center;
}

.ability-button:disabled .ability-button__hotkey {
    border-color: color-mix(in srgb, var(--engineering) 20%, var(--rule));
    color: var(--faint);
}

.ability-button__cooldown {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 0.8rem;
    overflow: hidden;
    border-top: 1px solid color-mix(in srgb, var(--engineering) 26%, var(--rule));
    background: rgba(8, 11, 16, 0.76);
}

.ability-button__cooldown-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--ability-cooldown-progress, 100%);
    background: linear-gradient(90deg, color-mix(in srgb, var(--engineering) 66%, var(--surface)), var(--engineering));
    box-shadow: 0 0 0.55rem color-mix(in srgb, var(--engineering) 35%, transparent);
    transition: width 120ms linear;
    will-change: width;
}

.ability-button__cooldown-count {
    position: relative;
    z-index: 1;
    display: block;
    color: var(--text);
    font-size: 0.57rem;
    font-weight: 700;
    line-height: calc(0.8rem - 1px);
    text-align: center;
    text-shadow: 0 1px 2px var(--background);
}

.ability-button--unlocked {
    animation: ability-unlock 780ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ability-button--activated {
    animation: ability-activate 680ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ability-activate {
    0% {
        border-color: color-mix(in srgb, var(--engineering) 58%, var(--rule));
        box-shadow: 0 0.45rem 1rem rgba(0, 0, 0, 0.34);
        filter: brightness(1);
    }

    35% {
        border-color: color-mix(in srgb, var(--engineering) 92%, white);
        box-shadow:
            0 0.55rem 1.2rem rgba(0, 0, 0, 0.4),
            inset 0 0 1.2rem color-mix(in srgb, var(--engineering) 18%, transparent),
            0 0 1.15rem color-mix(in srgb, var(--engineering) 42%, transparent);
        filter: brightness(1.16);
    }

    100% {
        border-color: color-mix(in srgb, var(--engineering) 24%, var(--rule));
        box-shadow: 0 0.35rem 0.8rem rgba(0, 0, 0, 0.3);
        filter: brightness(1);
    }
}

@keyframes ability-active-pulse {
    0%,
    100% {
        border-color: color-mix(in srgb, var(--next) 78%, white);
        box-shadow:
            0 0.55rem 1.2rem rgba(0, 0, 0, 0.4),
            inset 0 0 1rem color-mix(in srgb, var(--next) 22%, transparent),
            0 0 0.9rem color-mix(in srgb, var(--next) 32%, transparent);
        filter: brightness(1);
    }

    50% {
        border-color: color-mix(in srgb, var(--next) 82%, white);
        box-shadow:
            0 0.65rem 1.3rem rgba(0, 0, 0, 0.44),
            inset 0 0 1.35rem color-mix(in srgb, var(--next) 42%, transparent),
            0 0 0.75rem color-mix(in srgb, var(--next) 76%, transparent),
            0 0 1.65rem color-mix(in srgb, var(--next) 62%, transparent);
        filter: brightness(1.18);
    }
}

@keyframes ability-unlock {
    0% {
        opacity: 0;
        transform: translateY(1.5rem) scale(0.55) rotate(-5deg);
    }

    58% {
        opacity: 1;
        transform: translateY(-0.28rem) scale(1.08) rotate(1.5deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ability-button,
    .ability-button__cooldown-fill,
    .ability-tooltip {
        transition: none;
        animation: none;
    }

    .ability-targeting-reticle__ring {
        opacity: 0.8;
        animation: none;
    }
}