@font-face {
  font-family: "Acumin Pro Condensed";
  src: url("/wyrmsearch/static/media/Acumin%20Pro%20Condensed%20Regular.f8d3504fc56e0df1d596.otf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Acumin Pro Condensed";
  src: url("/wyrmsearch/static/media/Acumin%20Pro%20Condensed%20SemiBold.fa588a6f0396f402bd53.ttf");
  font-weight: bolder;
  font-style: normal;
}

@font-face {
  font-family: "Acumin Pro Condensed";
  src: url("/wyrmsearch/static/media/Acumin%20Pro%20Condensed%20Light.a5950ca8442b9884eb4c.otf");
  font-weight: lighter;
  font-style: normal;
}

body {
  margin: 0;
  font-family: "Acumin Pro Condensed", Helvetica, sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image: url(/wyrmsearch/static/media/background.e7ad311e474973d00471.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #00000066;
  color: white;
  font-size: 1.2em;
}

input::placeholder {
  color: rgb(226, 226, 226);
}

.cards-container {
  display: grid;
  padding: 0 min(30px, 2vw);
  grid-template-columns: repeat(auto-fill, minmax(max(150px, 15%), 1fr));
  justify-items: center;
  justify-content: space-between;
  align-items: flex-end;
  grid-gap: min(60px, 3vw);
  gap: min(60px, 3vw);
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 700px) {
  .cards-container {
      padding: 0 100px;
  }
}


.dragon-card {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  aspect-ratio: 57 / 87;
  border: 1px solid black;
  border-radius: 1cqw;
  background-color: white;
  background-size: cover;
  width: 100%;
  position: relative;
  overflow: hidden;

  .text-icon {
    height: 1.1em;
    margin-bottom: -0.1em;
  }

  .text-icon + .text-icon {
    margin-left: 0.1em;
  }

  .upper-container {
    font-family: "Amarante", sans-serif;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0.19 1;
    font-size: 7cqw;
    text-align: center;
    padding: 0 15cqw;
  }

  .cost {
    display: flex;
    background-image: linear-gradient(90deg, #46342f, #46342f 60%, #ffffff00);
    height: 12cqw;
    justify-content: flex-end;
    align-items: center;
    gap: 2cqw;
    padding-left: 12cqw;
    padding-right: 2cqw;

    .cost-icon {
      max-height: 70%;
      min-height: 50%;
      max-width: 8cqw;
    }

    .cost-slash {
      color: white;
      font-size: 9cqw;
      font-weight: bold;
    }
  }

  .middle-container {
    flex: 0.515 1;
    display: flex;
    justify-content: space-between;

    .left-column {
      display: flex;
      flex-direction: column;
      flex: 0.2 1;

      .habitats {
        margin-top: 2cqw;
        display: flex;
        flex-direction: column;
        gap: 1cqw;
        height: 31cqw;

        .crimson-habitat {
          background-color: #b25553;
        }

        .golden-habitat {
          background-color: #f1c749;
        }

        .amethyst-habitat {
          background-color: #a47d9f;
        }
      }

      .habitats > * {
        height: 9cqw;
        width: 12cqw;
        border: 1px solid black;
        border-left: 0px;
        border-top-right-radius: 2cqw;
        border-bottom-right-radius: 2cqw;
      }

      .number {
        font-size: 5cqw;
        font-family: "Acumin Pro Condensed", sans-serif;
        text-align: end;
        width: 12cqw;
      }
    }

    .right-column {
      display: flex;
      flex-direction: column;
      flex: 0.4 1;
      min-width: 40cqw;
      overflow: hidden;

      .VP {
        position: relative;
        width: 30%;
        margin-left: auto;
        margin-right: auto;

        .VP-value {
          position: absolute;
          top: -3%;
          left: 3%;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 8cqw;
          font-family: "Acumin Pro Condensed", sans-serif;
          font-weight: bolder;
          text-shadow: 0px 0px 0.18em white;
        }
      }

      .per-text {
        text-align: center;
        font-size: 4cqw;
        font-family: "Acumin Pro Condensed", sans-serif;
        font-weight: normal;
        font-style: italic;
        margin-top: -1cqw;
        margin-bottom: 1cqw;
      }

      .size {
        font-size: 6cqw;
        font-weight: 600;
        font-family: "Acumin Pro Condensed", sans-serif;
        width: -webkit-min-content;
        width: min-content;
        margin-left: auto;
        margin-right: auto;
        line-height: 0.8em;
      }

      .eggs {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2cqw;
        width: 22cqw;
        margin: 2cqw auto 0 auto;
        flex-wrap: wrap;

        .egg-icon {
          width: 8cqw;
        }
      }
    }
  }

  .lower-container.fledgling {
    background: linear-gradient(0deg, rgba(147, 112, 219, 0.4) 10%, rgba(147, 112, 219, 0.05) 75%, transparent);
    border-radius: 0.5cqw;
  }

  .lower-container {
    flex: 0.295 1;
    font-size: 6.1cqw;
    padding: 1.8cqw 6cqw 1.8cqw 6cqw;
    line-height: 1em;
    display: flex;

    .ability {
      display: flex;
      flex-direction: column;
      font-family: "Acumin Pro Condensed", sans-serif;
      width: 100%;
      .ability-icon {
        width: 12cqw;
        height: 12cqw;
        margin-right: 2cqw;
      }

      .ability-star-icon {
        width: 12cqw;
        height: 12cqw;
        margin-right: 2cqw;
      }

      .ability-first-sentence {
        display: flex;
        align-items: flex-start;
        margin-bottom: 0.5em;
      }

      .first-sentence-text {
        flex: 1 1;
      }

      .ability-remaining-text {
        display: flex;
        align-items: flex-start;
        margin-top: 0.5em;
      }

      .ability-ignore-cost {
        display: flex;
        flex-direction: column;
        width: 100%;
      }

      .ability-default {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        width: 100%;
      }

      .ability-hatchling {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .hatchling-ability-icon {
          width: 8cqw;
          height: 8cqw;
          margin-right: 2cqw;
          align-self: center;
        }

        .hatchling-ability-text {
          flex: 1 1;
        }
      }

      .divider {
        width: 100%;
        height: 0px;
        border-top: 1px dotted #444444;
        margin: 0.5cqw 0;
      }

      .highlight-aggressive {
        color: white;
        background: linear-gradient(
          0deg,
          transparent 20%,
          #f07422 20%,
          #f07422 93%,
          transparent 93%
        );
      }

      .highlight-playful {
        color: white;
        background: linear-gradient(
          0deg,
          transparent 20%,
          #df579f 20%,
          #df579f 93%,
          transparent 93%
        );
      }

      .highlight-helpful {
        color: white;
        background: linear-gradient(
          0deg,
          transparent 20%,
          #84c665 20%,
          #84c665 93%,
          transparent 93%
        );
      }

      .highlight-shy {
        color: white;
        background: linear-gradient(
          0deg,
          transparent 20%,
          #81cbf1 20%,
          #81cbf1 93%,
          transparent 93%
        );
      }

      .vp-span {
        font-weight: 600;
        padding-left: 0.4em;
        padding-right: 0.3em;
        white-space: nowrap;
        position: relative;
      }

      .vp-span .text-icon {
        width: 1.35em;
        height: 1.35em;
        position: absolute;
        top: 42%;
        left: 48%;
        transform: translate(-45%, -50%);
      }

      .fledgling-ability {
        display: flex;
        flex-direction: column;
        width: 100%;
      }

      .fledgling-resource-line {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.5em;
        padding-bottom: 0.3em;
        border-bottom: solid 0.01em;

        .adventurer-icon {
          margin-right: 0.2em;
          flex-shrink: 0;
          height: 1.6em;
          max-width: 1.5em;
          max-height: 1.6em;
        }

        .right-aligned-icons {
          display: flex;
          align-items: center;
          gap: 0.2em;
          flex: 1 1;
          justify-content: flex-end;
          position: relative;
          font-size: 1.3em;

          .resource-chain {
            display: flex;
            align-items: center;
            gap: 0.2em;
            position: relative;

            .resource-item {
              background: #46342f;
              border: 1px solid black;
              border-radius: 0.2em;
              padding: 0.2em;
              width: 1em;
              height: 1em;
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;
              z-index: 2;
              .text-icon {
                max-height: 1em;
                max-width: 1em;
              }
            }
          }

          .fletching-arrow {
            width: 1em;
            height: 1em;
            position: relative;
            z-index: 3;
            margin-left: -0.35em;
            margin-right: -0.5em;
          }
        }
      }

      .fledgling-effect-line {
        flex: 1 1;
        display: flex;
        align-items: flex-start;
        gap: 0.3em;

        .ability-type-icon {
          margin-right: 0.2em;
          flex-shrink: 0;
          height: 1.6em;
          max-width: 1.5em;
          max-height: 1.6em;
        }

        .effect-text {
          flex: 1 1;
          display: inline;
        }
      }
    }
  }
}

.expansion-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 0.3em;
  font-weight: 600;
  padding: 0.5cqw 0.5cqw 4cqw 4cqw;
  border-top-right-radius: 2cqw;
  z-index: 10;
}

.expansion-indicator.dragon {
  background-color: #443c38;
  color: white;
}

.expansion-indicator.cave {
  color: white;
  background: none;
}
.cave-card {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 1 / 1;
  border: 1px solid black;
  border-radius: 1cqw;
  background-color: white;
  background: linear-gradient(0, #000000ff, #00000000 45%), url(/wyrmsearch/static/media/cave-card-background.713497065077eaace202.jpg);
  background-size: cover;
  width: 90%;
  padding: 5%;
  position: relative;
  overflow: hidden;

  .text-icon {
    height: 1.2em;
    margin-bottom: -0.1em;
    filter: drop-shadow(0 0 0.18em black);
  }

  .text-icon + .text-icon {
    margin-left: 0.3em;
  }

  .number {
    color: white;
    text-align: end;
    margin-bottom: auto;
    font-size: 7cqw;
  }

  .container {
    display: flex;
    align-items: center;
    padding: 5cqw;
    padding-right: 5cqw;
    font-size: 7.9cqw;
    color: white;
    text-shadow: 0px 0px 0.18em black;
    line-height: 1.1em;
    gap: 5cqw;


    .ability-icon {
      height: 12cqw;;
    }
  }
}

.search-container {
  width: 100%;
  margin-bottom: 20px;
}

.MuiAccordion-rounded {
  background-color: #f5f6f1!important;
}

.search-summary {
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
  margin-right: 10px;
}

.search-input {
  flex: 1 1;
  max-width: 270px;
}

.search-count-container {
  display: flex;
  gap: 10px;
}

.search-count {
  display: flex;
  align-self: center;
  align-items: center;
  gap: 2px;
  font-size: 1.3em;
  font-family: "Amarante", sans-serif;

  img {
    width: 1em;
  }
}

.disabled {
  opacity: 0.5;
}

.search-details {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .row {
    display: flex;
    align-items: center;

    img {
      max-height: 35px;
      flex: 0 1 auto;
      min-width: 0;
      max-width: 100%;
    }
  }

  .personality {
    object-fit: contain;
    object-position: 4px 0;
  }
}

.expansion-filter {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  font-family: 'Acumin Pro Condensed', sans-serif;
  background-color: transparent;
  color: #7f8c8d;
  outline: 1px solid #bdc3c7;
}

.expansion-filter.active {
  background-color: #2c3e50;
  color: #ecf0f1;
  outline: none;
}

.expansion-filter:first-of-type {
  margin-right: 12px;
}

@media (min-width: 700px) {
  .search-container {
    width: 50%;
    min-width: 500px;
    max-width: 700px;
    margin: min(10vh, 100px) auto;
  }
}


/*# sourceMappingURL=main.aec8ffad.css.map*/