/* ANARCHY AVENUE: the heads-up display. Everything scales with --aa-scale. */

#hud { font-size: calc(15px * var(--aa-scale)); --pad: calc(14px * var(--aa-scale)); --job: var(--aa-amber); }
#hud > div { position: absolute; }

.hud-tl { left: calc(var(--pad) + var(--aa-safe-l)); top: var(--pad); display: flex; flex-direction: column; gap: .5em; width: 15.5em; }
.hud-tc { left: 50%; top: var(--pad); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5em; }
.hud-tr { right: calc(var(--pad) + var(--aa-safe-r)); top: var(--pad); display: flex; align-items: flex-start; gap: .7em; }
.hud-bl { left: calc(var(--pad) + var(--aa-safe-l)); bottom: calc(var(--pad) + var(--aa-safe-b)); }
.hud-bc { left: 50%; bottom: calc(var(--pad) + var(--aa-safe-b)); transform: translateX(-50%); width: min(40em, 52vw); display: flex; flex-direction: column; align-items: center; gap: .5em; }
.hud-br { right: calc(var(--pad) + var(--aa-safe-r)); bottom: calc(var(--pad) + var(--aa-safe-b)); text-align: right; }

/* weapon, health, respect */
.hud-weapon { display: flex; align-items: center; gap: .6em; }
.hud-wicon { width: 44px; height: 44px; flex: none; transform-origin: left center; transform: scale(var(--aa-scale)); margin-right: calc(44px * (var(--aa-scale) - 1)); }
.hud-wicon.sheet { background-image: var(--icons); background-size: 176px 132px; background-repeat: no-repeat; }
.hud-wname { font: 400 1.25em/1 var(--aa-display); letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 2px 6px rgba(0, 0, 0, .9); }
.hud-ammo { font: 400 1.7em/1 var(--aa-display); color: var(--aa-amber); text-shadow: 0 2px 6px rgba(0, 0, 0, .9); min-height: .9em; }

.hud-bars { display: flex; flex-direction: column; gap: .28em; }
.hud-bar { height: .62em; border-radius: .31em; background: rgba(8, 10, 14, .7); box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); overflow: hidden; }
.hud-bar i { display: block; height: 100%; width: 100%; border-radius: inherit; transition: width .18s ease; }
.hud-hp i { background: linear-gradient(90deg, #ff3b5c, #ff7a8c); }
.hud-hp.low i { animation: hud-blink .5s steps(2) infinite; }
.hud-ar { height: .42em; }
.hud-ar i { background: linear-gradient(90deg, #3d8dff, #7cc0ff); }
.hud-ar.none { opacity: .35; }

.hud-gangs { display: flex; flex-direction: column; gap: .22em; margin-top: .2em; }
.hud-gang { display: flex; align-items: center; gap: .5em; }
.hud-gname { width: 4.3em; font: 400 .92em/1 var(--aa-display); letter-spacing: .08em; text-transform: uppercase; color: var(--c); text-shadow: 0 1px 4px rgba(0, 0, 0, .9); }
.hud-meter { position: relative; flex: 1; height: .42em; border-radius: .21em; background: rgba(8, 10, 14, .7); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.hud-meter::after { content: ""; position: absolute; left: 50%; top: -.14em; bottom: -.14em; width: 1px; background: rgba(255, 255, 255, .5); }
.hud-meter i { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; background: var(--c); border-radius: inherit; box-shadow: 0 0 .5em var(--c); transition: width .3s, left .3s; }
.hud-gang.neg .hud-meter i { background: #ff4b4b; box-shadow: none; }

/* heat */
.hud-heat { display: flex; gap: .3em; padding: .3em .6em; border-radius: 2em; background: rgba(8, 10, 14, .5); opacity: .55; transition: opacity .3s; }
.hud-heat.hot { opacity: 1; }
.hud-badge { display: block; width: 1.75em; height: 1.75em; color: rgba(255, 255, 255, .16); }
.hud-badge svg { width: 100%; height: 100%; display: block; }
.hud-badge.on { color: #ffcf3a; filter: drop-shadow(0 0 .35em rgba(255, 190, 40, .9)); }
.hud-heat.evading .hud-badge.on { animation: hud-blink .5s steps(2) infinite; }
.hud-heat.pulse { animation: hud-pulse .45s ease; }
@keyframes hud-blink { 50% { opacity: .25; } }
@keyframes hud-pulse { 30% { transform: scale(1.25); } }

.hud-zone {
  font: 400 1.5em/1 var(--aa-display); letter-spacing: .16em; text-transform: uppercase; color: var(--c, #fff);
  text-shadow: 0 0 .5em var(--c, #fff), 0 2px 8px rgba(0, 0, 0, .9); opacity: 0; transition: opacity .6s;
}
.hud-zone.on { opacity: 1; }

/* money */
.hud-money { text-align: right; }
.hud-cash { font: 400 2.5em/1 var(--aa-display); letter-spacing: .03em; color: #7dffa0; text-shadow: 0 0 .35em rgba(60, 255, 130, .55), 0 2px 8px rgba(0, 0, 0, .9); }
.hud-goal { margin-top: .2em; font-size: .78em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .7); text-shadow: 0 1px 4px rgba(0, 0, 0, .9); }
.hud-mult { font: 400 1.05em/1.3 var(--aa-display); letter-spacing: .08em; text-transform: uppercase; color: var(--aa-amber); text-shadow: 0 1px 4px rgba(0, 0, 0, .9); }
.hud-pause {
  order: 2; display: grid; place-items: center; width: 2.6em; height: 2.6em; padding: 0; border-radius: .7em;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(8, 10, 14, .55); color: #fff; cursor: pointer; pointer-events: auto;
}
.hud-pause:hover { background: rgba(255, 255, 255, .16); }

/* radar */
.hud-map {
  display: block; width: calc(172px * var(--aa-scale)); height: calc(172px * var(--aa-scale)); border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .28), 0 0 0 5px rgba(8, 10, 14, .55), 0 6px 22px rgba(0, 0, 0, .6);
}

/* job text and messages */
.hud-obj {
  display: none; align-items: center; gap: .8em; padding: .55em 1em; border-radius: .7em; max-width: 100%;
  background: var(--aa-panel); border-left: .28em solid var(--job); font-weight: 650; text-align: left;
}
.hud-obj.on { display: flex; }
.hud-obj.flash { animation: hud-flash .9s ease; }
@keyframes hud-flash { 0% { background: rgba(255, 255, 255, .5); } }
.hud-timer { font: 400 1.5em/1 var(--aa-display); letter-spacing: .05em; color: var(--aa-amber); }
.hud-timer:empty { display: none; }
.hud-timer.late { color: var(--aa-red); animation: hud-blink .6s steps(2) infinite; }
.hud-msgs { display: flex; flex-direction: column; align-items: center; gap: .35em; width: 100%; }
.hud-msg {
  padding: .5em .9em; border-radius: .7em; background: var(--aa-panel); font-size: .95em; line-height: 1.35; text-align: center;
  animation: hud-in .25s ease; transition: opacity .35s; max-width: 100%;
}
.hud-msg.out { opacity: 0; }
.hud-msg b { color: var(--c); font-weight: 800; }
.hud-msg-gang { border-left: .28em solid var(--c); text-align: left; }
.hud-msg-bad { color: #ffb3b3; }
@keyframes hud-in { from { opacity: 0; transform: translateY(.5em); } }

/* bottom right */
.hud-car { font: 400 2em/1 var(--aa-display); letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: opacity .5s; text-shadow: 0 0 .4em rgba(255, 255, 255, .5), 0 2px 8px rgba(0, 0, 0, .9); }
.hud-car.on { opacity: 1; }
.hud-hint { display: none; margin-bottom: .5em; padding: .4em .8em; border-radius: .6em; background: var(--aa-panel); font-weight: 650; font-size: .92em; }
.hud-hint.on { display: inline-block; }

/* banners */
.hud-banner { left: 50%; top: 27%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; opacity: 0; width: 92%; }
.hud-banner.on { opacity: 1; }
.hud-banner.go .hud-banner-big { animation: hud-slam .5s cubic-bezier(.2, 1.5, .4, 1); }
.hud-banner-big {
  font: 400 4.8em/1 var(--aa-display); letter-spacing: .05em; text-transform: uppercase; color: #fff; transform: skew(-7deg) rotate(-2deg);
  text-shadow: 0 0 .08em #fff, 0 0 .3em var(--aa-amber), 0 0 .8em rgba(255, 197, 49, .6), 0 4px 12px rgba(0, 0, 0, .9);
}
.hud-banner-sub { margin-top: .5em; font: 400 1.7em/1.1 var(--aa-display); letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0, 0, 0, 1); }
.hud-banner.bad .hud-banner-big { text-shadow: 0 0 .08em #fff, 0 0 .3em var(--aa-red), 0 0 .9em rgba(255, 60, 60, .7), 0 4px 12px rgba(0, 0, 0, .9); }
.hud-banner.cop .hud-banner-big { text-shadow: 0 0 .08em #fff, 0 0 .3em #4a8dff, 0 0 .9em rgba(70, 130, 255, .8), 0 4px 12px rgba(0, 0, 0, .9); }
.hud-banner.good .hud-banner-big { text-shadow: 0 0 .08em #fff, 0 0 .3em var(--aa-green), 0 0 .9em rgba(80, 255, 140, .7), 0 4px 12px rgba(0, 0, 0, .9); }
.hud-banner.job .hud-banner-big { text-shadow: 0 0 .08em #fff, 0 0 .3em var(--job), 0 0 .9em var(--job), 0 4px 12px rgba(0, 0, 0, .9); }
.hud-banner.small .hud-banner-big { font-size: 2.6em; }
@keyframes hud-slam { from { transform: skew(-7deg) rotate(-2deg) scale(2.2); opacity: 0; } }

/* arrows, cash pops, warning */
.hud-arrows, .hud-pops { inset: 0; pointer-events: none; }
.hud-arrow { position: absolute; left: 0; top: 0; display: none; width: 30px; height: 30px; filter: drop-shadow(0 0 5px currentColor); will-change: transform; }
.hud-arrow svg { display: block; }
.hud-pop {
  position: absolute; left: 0; top: 0; font: 400 1.5em/1 var(--aa-display); letter-spacing: .04em; color: #7dffa0; white-space: nowrap;
  text-shadow: 0 0 .3em rgba(60, 255, 130, .7), 0 2px 5px rgba(0, 0, 0, 1); will-change: transform;
}
.hud-pop.neg { color: #ff8a8a; text-shadow: 0 2px 5px rgba(0, 0, 0, 1); }
.hud-warn {
  left: 50%; top: 62%; transform: translateX(-50%); display: none; padding: .3em .9em; border-radius: .5em;
  font: 400 2em/1 var(--aa-display); letter-spacing: .1em; background: rgba(255, 50, 30, .9); color: #fff; animation: hud-blink .3s steps(2) infinite;
}
.hud-warn.on { display: block; }

@media (max-width: 720px), (max-height: 460px) {
  .hud-gangs { display: none; }
  .hud-bc { width: 62vw; }
  .hud-goal { display: none; }
}
@media (max-width: 560px) {
  .hud-bc { bottom: calc(190px * var(--aa-scale) + var(--pad)); width: 92vw; }
  .hud-tc { top: calc(var(--pad) + 3.4em); }
  .hud-br { bottom: calc(240px + var(--aa-safe-b)); }
}