span.spoiler {
  filter: blur(5px);
}

span.spoiler:hover {
  filter: none;
}

div.fic span.warning {
  cursor: help;
  font-variant-emoji: emoji;
}

span.warning.lime:not(.lemon) {
  filter: hue-rotate(70deg);
}

span.warning.reference, span.warning.reference.lime:not(.lemon) {
  filter: grayscale(100%);
}

span.warning:hover {
  filter: brightness(120%);
}

span.warning.lime:not(.lemon):hover {
  filter: hue-rotate(70deg) brightness(120%);
}

span.warning.reference:hover {
  filter: grayscale(50%);
}

span.warning.reference.lime:not(.lemon):hover {
  filter: hue-rotate(70deg) grayscale(50%);
}

span.ship {
  font-weight: bold;
}

span.ship:not(.gen) {
  border-bottom: 2px dotted var(--highlight-colour);
  cursor: help;
}

span.bl {
  color: rgb(148,187,233);
}

span.gl {
  color: rgb(238,174,202);
}

span.hetero {
  color: rgb(193,181,218)
}

section#passwarn {
  display: none;
}

/* charts stuff */

div:has(main):has(.charts-css) {
  overflow-x: hidden;
}

table.charts-css.pie {
  max-width: 400px;
}

ul.charts-css.legend {
  width: fit-content;
}

table.charts-css caption {
  font-weight: bold;
}

table.charts-css:not(.pie), div.piewrap {
  border: 1px solid var(--highlight-colour);
  margin: 10px 0;
}

div.piewrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
}

div.piewrap ul.legend {
  border: none;
  flex-shrink: 2;
}

table.charts-css.column tbody {
  overflow-x: scroll;
  overflow-y: hidden;
}

table.charts-css.column tr {
  min-width: 5px;
}

.charts-css {
  --color-1: rgba(221,126,146,1) !important;
  --color-2: rgba(242,176,113,1) !important;
  --color-3: rgba(253,242,132,1) !important;
  --color-4: rgba(176,212,146,1) !important;
  --color-5: rgba(161,208,202,1) !important;
  --color-6: rgba(152,213,232,1) !important;
  --color-7: rgba(183,171,200,1) !important;
  --color-8: rgba(243,186,223,1) !important;
  --color-9: rgba(212,189,141,1) !important;
  --color-10: rgba(210,210,205,1) !important;
}

@media (max-width: 700px) {
  div.piewrap {
    flex-wrap: wrap;
  }
}