.hud-semantic-cue {
    position: relative;
    display: block;
    width: 100%;
    min-width: 4.8rem;
    height: 4.8rem;
    overflow: hidden;
    contain: layout paint;
    color: #efffe9;
}

.activity-hud-card > .hud-semantic-cue {
    width: min(100%, 6.5rem);
    min-width: 4.8rem;
    height: 2.35rem;
    margin-inline-start: auto;
}

.activity-hud-card > .hud-semantic-cue .hud-semantic-cue__scanner {
    bottom: .55rem;
}

.hud-semantic-cue__equalizer {
    position: absolute;
    inset: auto 6% .35rem;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: end;
    gap: .15rem;
    height: 2.8rem;
    padding: .3rem;
    border: 1px solid rgba(224, 255, 235, .52);
    border-radius: .45rem;
    background: rgba(10, 43, 31, .78);
}

.hud-semantic-cue__equalizer i {
    height: calc(22% + mod(var(--hud-bar), 5) * 14%);
    border-radius: .16rem .16rem 0 0;
    background: linear-gradient(180deg, #f7fff1, #63d899 55%, #187250);
    transform-origin: bottom;
    animation: hud-cue-equalizer .84s ease-in-out infinite alternate;
    animation-delay: calc(var(--hud-bar) * -73ms);
}

.hud-semantic-cue__scanner {
    position: absolute;
    inset: auto 8% 1.35rem;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: .18rem;
    padding: .32rem;
    border-radius: 999px;
    background: rgba(30, 20, 16, .78);
}

.hud-semantic-cue__scanner i {
    height: .5rem;
    border-radius: 999px;
    background: #5e201b;
}

.hud-semantic-cue__scanner::after {
    position: absolute;
    inset: .32rem auto .32rem .32rem;
    width: calc((100% - .64rem) / 4);
    border-radius: 999px;
    background: #ff5b3e;
    box-shadow: 0 0 .8rem #ff5b3e;
    content: "";
    animation: hud-cue-kitt 1.35s ease-in-out infinite alternate;
}

.hud-semantic-cue__radar,
.hud-semantic-cue__season,
.hud-semantic-cue__orbit {
    position: absolute;
    left: 50%;
    bottom: .1rem;
    width: 4.4rem;
    aspect-ratio: 1;
    border: 1px solid rgba(202, 255, 221, .72);
    border-radius: 50%;
    background: rgba(7, 46, 29, .82);
    transform: translateX(-50%);
}

.hud-semantic-cue__radar {
    overflow: hidden;
    background:
        linear-gradient(rgba(202, 255, 221, .22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(202, 255, 221, .22) 1px, transparent 1px),
        rgba(7, 46, 29, .82);
    background-size: 50% 50%;
}

.hud-semantic-cue__radar::after {
    position: absolute;
    inset: 50% 50% 0 0;
    border-radius: 100% 0 0;
    background: conic-gradient(from 180deg, rgba(96, 255, 163, .72), transparent 42deg);
    content: "";
    transform-origin: 100% 0;
    animation: hud-cue-radar 2.2s linear infinite;
}

.hud-semantic-cue__radar i,
.hud-semantic-cue__radar b {
    position: absolute;
    z-index: 1;
    width: .36rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #d9ffe5;
}

.hud-semantic-cue__radar i { left: 60%; top: 24%; }
.hud-semantic-cue__radar b:nth-of-type(1) { left: 28%; top: 62%; }
.hud-semantic-cue__radar b:nth-of-type(2) { left: 72%; top: 68%; }
.hud-semantic-cue__radar b:nth-of-type(3) { left: 44%; top: 46%; }

.hud-semantic-cue__season {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow: hidden;
    animation: hud-cue-season 6s steps(4, end) infinite;
}

.hud-semantic-cue__season i {
    display: grid;
    place-items: center;
    font-style: normal;
}

.hud-semantic-cue__orbit {
    background: radial-gradient(circle, rgba(15, 67, 42, .94) 0 25%, rgba(9, 42, 28, .76) 26% 100%);
}

.hud-semantic-cue__orbit i,
.hud-semantic-cue__orbit b {
    position: absolute;
    left: calc(50% - .62rem);
    top: calc(50% - .62rem);
    display: grid;
    width: 1.24rem;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background: #174f36;
    font-style: normal;
}

.hud-semantic-cue__orbit b { animation: hud-cue-orbit 3.6s linear infinite; }
.hud-semantic-cue__orbit b:nth-of-type(2) { animation-delay: -1.2s; }
.hud-semantic-cue__orbit b:nth-of-type(3) { animation-delay: -2.4s; }

.hud-semantic-cue__weather {
    position: absolute;
    inset: 0;
}

.hud-semantic-cue__weather b {
    position: absolute;
    left: -2.5rem;
    top: .2rem;
    font-size: 2.35rem;
    font-weight: 400;
    animation: hud-cue-weather-front 5.2s linear infinite;
}

.hud-semantic-cue__weather i {
    position: absolute;
    top: 2.2rem;
    width: .12rem;
    height: 1.25rem;
    border-radius: 999px;
    background: rgba(214, 241, 255, .85);
    transform: rotate(18deg);
    animation: hud-cue-rain .9s linear infinite;
}

.hud-semantic-cue__weather i:nth-child(1) { left: 34%; }
.hud-semantic-cue__weather i:nth-child(2) { left: 49%; animation-delay: -.3s; }
.hud-semantic-cue__weather i:nth-child(3) { left: 64%; animation-delay: -.6s; }

.hud-semantic-cue__traveller {
    position: absolute;
    left: 8%;
    bottom: .15rem;
    width: 3.2rem;
    height: 3.2rem;
    animation: hud-cue-travel 3.2s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

.hud-semantic-cue__traveller img { width: 100%; height: 100%; object-fit: contain; }
.hud-semantic-cue__sprout { position: absolute; left: 48%; bottom: 25%; font-size: 1.35rem; }

@keyframes hud-cue-equalizer { from { transform: scaleY(.32); opacity: .64; } to { transform: scaleY(1); opacity: 1; } }
@keyframes hud-cue-kitt { to { transform: translateX(300%); } }
@keyframes hud-cue-radar { to { transform: rotate(1turn); } }
@keyframes hud-cue-season { to { transform: translateX(-50%) rotate(1turn); } }
@keyframes hud-cue-orbit { from { transform: rotate(0deg) translateX(1.55rem) rotate(0deg); } to { transform: rotate(1turn) translateX(1.55rem) rotate(-1turn); } }
@keyframes hud-cue-weather-front { to { transform: translateX(17rem); } }
@keyframes hud-cue-rain { from { opacity: 0; transform: translateY(-.6rem) rotate(18deg); } 30% { opacity: 1; } to { opacity: 0; transform: translateY(2.2rem) rotate(18deg); } }
@keyframes hud-cue-travel { to { transform: translateX(clamp(4rem, 16vw, 11rem)); } }

@media (prefers-reduced-motion: reduce) {
    .hud-semantic-cue * ,
    .hud-semantic-cue *::before,
    .hud-semantic-cue *::after {
        animation: none !important;
    }

    .hud-semantic-cue__scanner::after { left: 38%; }
    .hud-semantic-cue__equalizer i { transform: scaleY(.65); }
    .hud-semantic-cue__season { transform: translateX(-50%); }
    .hud-semantic-cue__orbit b:nth-of-type(1) { transform: translateX(1.55rem); }
    .hud-semantic-cue__orbit b:nth-of-type(2) { transform: rotate(120deg) translateX(1.55rem) rotate(-120deg); }
    .hud-semantic-cue__orbit b:nth-of-type(3) { transform: rotate(240deg) translateX(1.55rem) rotate(-240deg); }
    .hud-semantic-cue__traveller { transform: translateX(clamp(2rem, 8vw, 5rem)); }
}

@media (forced-colors: active) {
    .hud-semantic-cue,
    .hud-semantic-cue > span {
        border-color: var(--shell-forced-border-focus);
        background: var(--shell-forced-canvas);
        color: var(--shell-forced-text);
        forced-color-adjust: auto;
    }

    .hud-semantic-cue i,
    .hud-semantic-cue b,
    .hud-semantic-cue span::after {
        border: 1px solid var(--shell-forced-border-focus);
        background: var(--shell-forced-accent);
        color: var(--shell-forced-accent-text);
        box-shadow: none;
    }
}