:root {
  --font-size-standard: 0.9rem;
  --font-size-result: 1.4rem;
  --background-image-base: linear-gradient(
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0.8)
    ),
    url("../assets/ui/jazz_background_main.webp");
  --font-primary: "RozhaOne";
  --font-secondary: "RozhaOne";
  --font-title: "Broadway";
  --logo-standard: url("../assets/logos/reanimated-ce-logo.webp");
  --color-success: rgb(15, 122, 15);
  --color-failure: darkred;
  --color-warning: darkorange;
  --color-critical-success: rgb(21, 39, 204);
  --color-critical-failure: rgb(141, 32, 231);
  --img-icon-color-filter: brightness(0) saturate(100%) invert(52%) sepia(9%)
    saturate(2368%) hue-rotate(360deg) brightness(86%) contrast(84%);
}

body {
}

.d100 {
  width: 18px;
  height: 18px;
  color: black;
  border-width: 0px;
  filter: var(--img-icon-color-filter);
}

.item .thumbnail,
.item-img {
  /*filter: invert(90%) sepia(10%) saturate(1215%) hue-rotate(55deg) brightness(93%) contrast(89%);*/
  /*filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);*/
  filter: var(--img-icon-color-filter);
}

#logo {
  content: var(--logo-standard);
  width: 50px;
  height: 50px;
  margin-left: 15px;
}

#pause > img {
  content: var(--logo-standard);
  height: 192px;
  width: 192px;
  top: -45px;
  left: calc(50% - 96px);
}

i.fvtt-cthulhu-eternal {
  width: 36px;
  height: 36px;
  background-image: var(--logo-standard);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  position: relative;
  filter: grayscale(1);
  transition: 0.3s;
}

.application.dialog.fvtt-cthulhu-eternal {
  font-family: var(--font-primary);
  font-size: calc(var(--font-size-standard) * 1);
  background-image: var(--background-image-base);
  button:hover {
    background: var(--color-dark-6);
  }
  .legend {
    font-family: var(--font-primary);
  }
}

.chat-message,
.chat-message.whisper {
  font-family: var(--font-primary);
  background-image: var(--background-image-base);
  background-repeat: repeat-y;
  background-position: 0%;
  background-size: 100% 100%;
}

.chat-san-request,
.chat-lethal-damage {
  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    justify-content: center;
    align-items: center;
    .result-lethal {
      color: var(--color-critical-failure);
      font-family: var(--font-title);
    }
    .san-type-buttons {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10px 0;
      button {
        margin: 0 2px;
        font-family: var(--font-primary);
        font-size: calc(var(--font-size-standard) * 0.9);
        border: none;
        padding: 2px 2px;
        cursor: pointer;
        transition: background-color 0.3s;
        min-width: 6rem;
        max-width: 6rem;
      }
    }
    .san-loose-buttons {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10px 0;
      button {
        margin: 0 2px;
        font-family: var(--font-primary);
        font-size: calc(var(--font-size-standard) * 1.1);
        border: none;
        padding: 2px 2px;
        cursor: pointer;
        transition: background-color 0.3s;
        min-width: 3rem;
        max-width: 3rem;
      }
    }
    .result-non-lethal {
      color: var(--color-failure);
      font-family: var(--font-title);
    }
    li {
      margin: 0 10px;
      font-family: var(--font-primary);
      font-size: calc(var(--font-size-standard) * 1.02);
    }
    .combatants-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 4px;
      margin: 8px 0;
      button.apply-wounds-btn {
        font-family: var(--font-primary);
        font-size: calc(var(--font-size-standard) * 0.7);
        border: 1px solid #4b4a44;
        padding: 4px 6px;
        cursor: pointer;
        transition: background-color 0.3s;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background-color: #f0f0e0;
        color: #1c1c1c;
        &:hover {
          background-color: #d5d5c5;
          border-color: #2d2d2a;
        }
      }
    }
  }
}
