#combat-stats {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--big-gap);

  [aria-level='3'],
  h3 {
    font-size: 0.8rem;
  }

  .health-container {
    display: flex;
    gap: var(--half-gap);
    height: 70px;
  }

  .luck-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      'header odd button'
      'header even button';
    justify-items: end;
    column-gap: var(--tiny-gap);

    h3 {
      grid-area: header;
      writing-mode: vertical-rl;
      rotate: 180deg;
    }

    button {
      grid-area: button;
      place-self: center;
    }
  }

  .adrenaline-container {
    align-items: center;

    input {
      font-size: 2rem;
    }
  }
}

.adrenaline {
  position:relative;
  isolation: isolate;
  &:before{
    border-radius:inherit;
    overflow:hidden;
    z-index:-1;
    filter:var(--imgInvert);
    content: '';
    position:absolute;
    inset:0;
    background: {
      image: var(--flame);
      position: center;
      size: contain;
      repeat: no-repeat;
    }
  }
}

.max {
  position:relative;
  isolation: isolate;
  &:before{
    border-radius:inherit;
    overflow:hidden;
    z-index:-1;
    background: {
      position: center;
      size: contain;
      repeat: no-repeat;
    }
    filter:var(--imgInvert);
  }

  &.health:before {
    content: '';
    position:absolute;
    inset:0;
    background: {
      image: var(--heart);
    }
  }

  &.resolve:before {
    content: '';
    position:absolute;
    inset:0;
    background: {
      image: var(--skull);
    }
  }
}