.trait-fx-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: auto;
  background: rgba(0, 0, 0, .42);
  transition: opacity 220ms ease;
}

.trait-fx-overlay.is-live {
  opacity: 1;
}

.trait-fx-overlay.is-leaving {
  opacity: 0;
}

.trait-fx-hero {
  display: grid;
  place-items: center;
  gap: 10px;
  color: #fff4ce;
  text-align: center;
  filter: drop-shadow(0 0 22px rgba(240, 217, 155, .62));
  animation: traitHeroIn 860ms cubic-bezier(.18, .86, .28, 1) both;
}

.trait-fx-emoji {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  color: #fff4ce;
  font-size: 76px;
  line-height: 1;
}

.trait-fx-name {
  color: #f4e4b8;
  font-size: 28px;
  font-weight: 950;
  line-height: 1;
}

.trait-fx-summary {
  margin-top: 8px;
  color: rgba(255, 255, 255, .92);
  font-size: 16px;
  font-weight: 850;
  line-height: 1.2;
  text-shadow: 0 0 12px rgba(255, 255, 255, .22);
}

.trait-fx-summary-em {
  color: rgba(126, 215, 154, .98);
  text-shadow: 0 0 14px rgba(126, 215, 154, .5);
}

.trait-fx-skip {
  position: fixed;
  top: 14px;
  right: 14px;
  min-height: 30px;
  padding: 5px 10px;
  color: rgba(244, 228, 184, .86);
  background: rgba(10, 12, 14, .78);
  border: 1px solid rgba(240, 217, 155, .36);
  border-radius: 0;
  cursor: pointer;
}

.trait-fx-skip:hover,
.trait-fx-skip:focus-visible {
  color: #fff;
  border-color: rgba(240, 217, 155, .78);
  outline: none;
}

.region-center .field-route-zone.trait-route-gain,
.region-center .field-route-zone.trait-route-drop {
  z-index: 36;
  border-color: rgba(126, 215, 154, .96);
  box-shadow: 0 0 0 2px rgba(126, 215, 154, .36), 0 0 24px rgba(126, 215, 154, .48);
}

.region-center .field-route-zone.trait-route-drop {
  border-color: rgba(240, 217, 155, .82);
  box-shadow: 0 0 0 2px rgba(240, 217, 155, .24), 0 0 20px rgba(240, 217, 155, .34);
}

.region-center .field-route-zone.trait-route-gain .route-breakout-score,
.region-center .field-route-zone.trait-route-drop .route-breakout-score {
  color: #fff4ce;
  text-shadow: 0 0 12px rgba(126, 215, 154, .72);
}

.field-grid-readout.trait-visible-route-gain .fpr-name,
.field-grid-readout.trait-visible-route-gain .fpr-score,
.field-grid-readout.trait-visible-route-drop .fpr-name,
.field-grid-readout.trait-visible-route-drop .fpr-score {
  color: #fff4ce !important;
  text-shadow: 0 0 12px rgba(126, 215, 154, .78), 0 1px 3px rgba(0, 0, 0, .92) !important;
}

.field-grid-readout.trait-visible-route-gain .fpr-bar,
.field-grid-readout.trait-visible-route-drop .fpr-bar {
  box-shadow: 0 0 0 1px rgba(255, 244, 206, .34) inset, 0 0 14px rgba(255, 244, 206, .42) !important;
}

.field-grid-readout.trait-visible-route-gain .fpr-bar i,
.field-grid-readout.trait-visible-route-drop .fpr-bar i {
  box-shadow: 0 0 14px rgba(255, 244, 206, .86);
}

.field-grid-readout.trait-visible-route-gain.trait-route-flash,
.field-grid-readout.trait-visible-route-drop.trait-route-flash {
  animation: traitVisibleRouteFlash 820ms ease-out both;
}

.region-center .field-route-zone.trait-route-gain .route-breakout-track,
.region-center .field-route-zone.trait-route-drop .route-breakout-track {
  position: relative;
  overflow: visible;
}

.region-center .field-route-zone.trait-route-gain .route-breakout-track::after,
.region-center .field-route-zone.trait-route-drop .route-breakout-track::after {
  content: "";
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: calc(var(--trait-before-pct, 0) * 1%);
  width: calc((var(--trait-after-pct, 0) - var(--trait-before-pct, 0)) * 1%);
  min-width: 8px;
  background: rgba(255, 244, 206, .82);
  box-shadow: 0 0 14px rgba(255, 244, 206, .86);
  opacity: 0;
  pointer-events: none;
}

.region-center .field-route-zone.trait-route-flash .route-breakout-track::after {
  animation: traitRouteSegmentFlash 820ms ease-out both;
}

body.tactical-v77 .region-head .match-top-rails {
  justify-content: flex-start;
}

body.tactical-v77 .hud-team-line.home .match-top-rails {
  align-items: center;
  align-self: center;
  padding: 0;
  margin-left: 6px;
}

body.tactical-v77 .hud-team-line.home .relic-rail,
body.tactical-v77 .hud-team-line.home .relic-rail-list {
  align-items: center;
  gap: 4px;
}

body.tactical-v77 .hud-team-line.home .relic-rail-list {
  overflow: visible;
}

body.tactical-v77 .hud-team-line.home .match-top-rails[hidden] {
  display: none;
}

body.tactical-v77 .region-head .rail-label {
  display: none;
}

.relic-chip.trait-compact-relic {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  grid-template-rows: 1fr;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.relic-chip.trait-compact-relic:hover,
.relic-chip.trait-compact-relic:focus-visible {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.relic-chip.trait-compact-relic.is-triggered {
  border: 0;
  background: transparent;
  box-shadow: 0 0 18px rgba(126, 215, 154, .34);
}

.relic-chip.trait-compact-relic .relic-icon {
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: currentColor;
  font-size: 17px;
  line-height: 1;
}

.relic-chip.trait-compact-relic .relic-name {
  display: none;
}

.relic-chip.is-active,
.relic-chip.trait-compact-relic.is-active {
  border-color: rgba(126, 215, 154, .58);
  background: rgba(36, 94, 62, .30);
}

.relic-chip.trait-compact-relic.is-active {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.relic-chip.is-active .relic-icon,
.relic-chip.trait-compact-relic.is-active .relic-icon {
  border-color: rgba(126, 215, 154, .58);
  background: rgba(126, 215, 154, .15);
  filter: saturate(1.16) brightness(1.14);
}

.relic-chip.trait-compact-relic.is-active .relic-icon {
  border: 0;
  background: transparent;
}

.relic-chip.is-expired,
.relic-chip.trait-compact-relic.is-expired {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  color: rgba(200, 206, 216, .54);
}

.relic-chip.trait-compact-relic.is-expired {
  border: 0;
  background: transparent;
}

.relic-chip.is-expired .relic-icon,
.relic-chip.trait-compact-relic.is-expired .relic-icon {
  filter: grayscale(1) brightness(.68);
  opacity: .58;
}

.relic-chip.trait-compact-relic.is-expired .relic-icon {
  border: 0;
  background: transparent;
}

.relic-chip.trait-chip-flash {
  animation: traitChipFlash 760ms ease-out both;
}

.relic-chip.trait-chip-dimming {
  animation: traitChipDim 920ms ease-out both;
}

.relic-chip.trait-event-chip-flash {
  border: 0;
  background: transparent;
  animation: traitEventChipFlash 920ms ease-out both;
}

.field-grid-readout .trait-threat-source {
  width: auto;
  min-width: 20px;
  padding: 0 4px;
  border-color: rgba(126, 215, 154, .48);
  background: rgba(20, 82, 50, .42);
  color: #86efac;
  font-size: 10px;
}

.intent-field-narrative .trait-threat-narrative-readout {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 2px 0 4px;
  vertical-align: middle;
}

.intent-field-narrative .trait-threat-value {
  color: #86efac;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(126, 215, 154, .36), 0 1px 3px rgba(0, 0, 0, .72);
}

.intent-field-narrative .trait-threat-source {
  width: auto;
  min-width: 20px;
  padding: 0 4px;
  border-color: rgba(126, 215, 154, .48);
  background: rgba(20, 82, 50, .42);
  color: #86efac;
  font-size: 10px;
  vertical-align: middle;
}

.field-grid-readout.trait-threat-readout-flash {
  animation: traitThreatReadoutFlash 980ms ease-out both;
}

.intent-field-narrative.trait-threat-readout-flash {
  animation: traitThreatReadoutFlash 980ms ease-out both;
}

.field-grid-readout .trait-threat-source.trait-threat-source-flash,
.intent-field-narrative .trait-threat-source.trait-threat-source-flash {
  animation: traitThreatSourceFlash 980ms ease-out both;
}

.trait-threat-flyer {
  position: fixed;
  z-index: 3300;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  color: #fff4ce;
  font-size: 24px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 16px rgba(126, 215, 154, .74), 0 2px 8px rgba(0, 0, 0, .74);
  transition: transform 820ms cubic-bezier(.2, .86, .22, 1), opacity 180ms ease;
}

.trait-threat-flyer.is-live {
  opacity: 1;
}

.fpr-risk-delta.trait-threat-number-flash,
.trait-threat-value.trait-threat-number-flash,
.fpr-score.trait-threat-number-flash {
  animation: traitThreatNumberFlash 520ms cubic-bezier(.16, .9, .2, 1) both;
}

#energy.trait-energy-gain .energy-crystal-big {
  animation: traitEnergyGainPulse 920ms cubic-bezier(.2, .9, .22, 1) both;
}

#energy.trait-energy-gain .energy-num {
  color: #fff4ce;
  text-shadow: 0 0 14px rgba(126, 215, 154, .86), 0 2px 4px rgba(0, 0, 0, .68);
}

.energy-float.gain.trait-energy-float {
  color: #fff4ce;
  text-shadow: 0 0 14px rgba(126, 215, 154, .86), 0 2px 10px rgba(0, 0, 0, .64);
}

.pile-hand.pile-icon.trait-hand-readout-flash {
  animation: traitHandReadoutFlash 980ms ease-out both;
}

@keyframes traitHeroIn {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(.9);
  }
  28% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes traitEventChipFlash {
  0% {
    box-shadow: 0 0 0 0 rgba(126, 215, 154, 0);
    filter: brightness(1);
    transform: translateY(0) scale(1);
  }
  24% {
    box-shadow: 0 0 0 2px rgba(126, 215, 154, .36), 0 0 24px rgba(126, 215, 154, .68);
    filter: brightness(1.24);
    transform: translateY(-1px) scale(1.04);
  }
  100% {
    box-shadow: 0 0 0 1px rgba(126, 215, 154, .16), 0 0 14px rgba(126, 215, 154, .34);
    filter: brightness(1);
    transform: translateY(0) scale(1);
  }
}

@keyframes traitEnergyGainPulse {
  0% {
    border-color: #6db3ff;
    box-shadow: 0 0 0 rgba(90, 170, 255, .6), inset 0 0 0 rgba(255, 255, 255, .15), 3px 3px 0 rgba(0, 0, 0, .5);
    transform: rotate(45deg) scale(1);
  }
  26% {
    border-color: #fff4ce;
    background: linear-gradient(135deg, #fff4ce 0%, #7ed79a 46%, #1f7c54 100%);
    box-shadow: 0 0 0 3px rgba(126, 215, 154, .20), 0 0 24px rgba(126, 215, 154, .66), inset 0 0 12px rgba(255, 244, 206, .28), 3px 3px 0 rgba(0, 0, 0, .5);
    transform: rotate(45deg) scale(1.08);
  }
  100% {
    border-color: #6db3ff;
    box-shadow: 0 0 0 rgba(90, 170, 255, .6), inset 0 0 0 rgba(255, 255, 255, .15), 3px 3px 0 rgba(0, 0, 0, .5);
    transform: rotate(45deg) scale(1);
  }
}

@keyframes traitRouteSegmentFlash {
  0% {
    opacity: 0;
    transform: scaleX(.15);
    transform-origin: left center;
  }
  22% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scaleX(1.18);
    transform-origin: left center;
  }
}

@keyframes traitVisibleRouteFlash {
  0% {
    filter: brightness(1);
  }
  26% {
    filter: brightness(1.45);
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes traitChipFlash {
  0% {
    box-shadow: 0 0 0 0 rgba(126, 215, 154, 0);
    transform: translateY(0);
  }
  34% {
    box-shadow: 0 0 0 2px rgba(126, 215, 154, .32), 0 0 20px rgba(126, 215, 154, .58);
    transform: translateY(-1px);
  }
  100% {
    box-shadow: 0 0 0 1px rgba(126, 215, 154, .18), 0 0 12px rgba(126, 215, 154, .32);
    transform: translateY(0);
  }
}

@keyframes traitChipDim {
  0% {
    filter: brightness(1.3);
    box-shadow: 0 0 20px rgba(240, 217, 155, .42);
  }
  100% {
    filter: brightness(.72) grayscale(1);
    box-shadow: none;
  }
}

@keyframes traitThreatReadoutFlash {
  0% {
    filter: brightness(1);
  }
  24% {
    filter: brightness(1.5);
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes traitThreatSourceFlash {
  0% {
    box-shadow: 0 0 0 0 rgba(126, 215, 154, 0);
    transform: translateY(0) scale(1);
  }
  28% {
    box-shadow: 0 0 0 2px rgba(126, 215, 154, .32), 0 0 18px rgba(126, 215, 154, .66);
    transform: translateY(-1px) scale(1.08);
  }
  100% {
    box-shadow: 0 0 0 1px rgba(126, 215, 154, .16);
    transform: translateY(0) scale(1);
  }
}

@keyframes traitThreatNumberFlash {
  0% {
    scale: 1;
    filter: brightness(1);
  }
  34% {
    scale: 1.75;
    filter: brightness(2);
  }
  100% {
    scale: 1;
    filter: brightness(1);
  }
}

@keyframes traitHandReadoutFlash {
  0% {
    filter: brightness(1);
    box-shadow: none;
    transform: translateY(0) scale(1);
  }
  26% {
    filter: brightness(1.35);
    box-shadow: 0 0 0 2px rgba(126, 215, 154, .24), 0 0 18px rgba(126, 215, 154, .52);
    transform: translateY(-1px) scale(1.04);
  }
  100% {
    filter: brightness(1);
    box-shadow: none;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 700px) {
  .trait-fx-emoji {
    width: 66px;
    height: 66px;
    font-size: 58px;
  }

  .trait-fx-name {
    font-size: 22px;
  }

  .trait-fx-summary {
    font-size: 14px;
  }
}