table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 3em;
  & caption {
    text-align: start;
    margin-block-end: 1rlh;
    & a {
      color: CanvasText;
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
      h2 {
        margin-block: 0;
      }
    }
  }
  & td,
  & th {
    border: 1px solid grey;
    padding: 0.75rem;
  }
  & > thead {
    position: sticky;
    top: 0;
    background-color: Canvas;
    z-index: 100;
  }
  & td {
    vertical-align: top;
  }
  & tbody > tr:first-child > * {
    border-top: unset;
  }
}

.weapon-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 48px);
  gap: 0.75rem;
  & li {
    width: 48px;
  }
  & .icon {
    display: flex;
    & img {
      width: 48px;
      height: 48px;
      font-size: 0.5rem;
    }
    &.craftable {
      outline-color: rgb(162, 0, 0);
      outline-style: solid;
      outline-width: 2px;
    }
    & .icon-watermark {
      position: absolute;
    }
  }
}