@font-face {
  font-family: "DistressBlack";
  src: url("@{fonts-path}/dcc_sharp_distress_black_by_dccanim.otf");
}

* {
  box-sizing: border-box;
}

body.system-vermine2047 {
  font-family: "Roboto", sans-serif;
  color: @theme-color-secondary;
}

// Les checkbox/radio du système ne s'étirent jamais dans les conteneurs
// flex : ils gardent leur taille hexagonale (1rem / 1.5rem). Les cases de
// blessure en `div.hexa` (position:absolute) ne sont pas affectées.
.system-vermine2047 {
  input[type="checkbox"],
  input[type="radio"] {
    flex: 0 0 auto;
  }
}

// Override Foundry Core default CSS custom properties
// for better readability on the light Vermine2047 theme.

// Core windows (FilePicker, dialogs, compendium, RollTable, Journal, …) and chat
// messages sit on the light box_background texture: force dark readable text.
// The dark sidebar keeps Foundry's default light-on-dark text colors.
body.system-vermine2047.theme-dark {
  .window-content,
  .roll-table-sheet,
  .journal-sheet,
  .document-sheet,
  .settings-sheet {
    color: @color-text-dark-primary;
    --color-text-primary: @color-text-dark-primary;
    --color-text-emphatic: @color-text-dark-header;
    --color-text-secondary: @color-text-dark-secondary;
    --color-text-subtle: #666666;
    --color-text-light-highlight: @color-acid-green;
    --color-text-light-heading: @color-text-dark-header;
    --color-text-light-primary: @color-text-dark-secondary;
    --color-text-dark-primary: @color-text-dark-primary;
    --color-text-dark-secondary: @color-text-dark-secondary;
    --color-text-dark-header: @color-text-dark-header;
    --text-color: @color-text-dark-primary;
  }
}

#chat-log .message,
.chat-log .message {
  .message-content {
    color: @color-text-dark-primary;
  }

  header.message-header {
    color: #fff;
    text-shadow: 0 0 5px #000;
  }
}

#settings-config button,
#settings-config a.button {
  --button-text-color: #000000;
  --button-border-color: #666666;
  color: #000000;
}

body.system-vermine2047.theme-dark .form-group > label {
  color: @color-text-dark-secondary;
}

#settings-config p,
#settings-config .hint {
  color: @color-text-dark-secondary;
}

img {
  border: none;
}

ul.unstyled {
  list-style-type: none;
  padding: 0;
  margin: 0;

  li {
    padding: 0;
    margin: 0;
  }
}

.w-full {
  width: 100%;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.window-app {
  font-family: "Roboto", sans-serif;
  .shadow(0px, 0px, 30px, rgba(106, 176, 76, 0.25));
}

.system-vermine2047 {
  .window-content,
  form.application.sheet.vermine2047 {
    .background-image(url("@{ui-path}/box_background.webp"), repeat);
    padding: 10px;
    overflow-y: hidden;
  }

  .dialog .window-content {
    .background-image(url("@{ui-path}/fond_chat_box.webp"), repeat);
    padding: 0.5rem;
    overflow-y: hidden;
  }
}

// Les fenêtres de choix (totem, acteur) peuvent dépasser la hauteur fixe :
// on autorise le défilement pour accéder à la totalité du contenu.
.application#TOTEM_PICKER .window-content,
.application#ACTOR_PICKER .window-content,
.application#TRAIT_SELECTOR .window-content {
  overflow-y: auto;
}

// La fiche de groupe contient beaucoup de zones (membres, objectifs, totem…) :
// dès que le contenu dépasse la hauteur de la fenêtre, on autorise le défilement
// pour ne pas perdre l'accès aux zones du bas.
.application.sheet.vermine2047.group .window-content,
.application.sheet.vermine2047.community .window-content {
  overflow-y: auto;
}

.window-content .row {
  &.smb { margin-bottom: 0.25rem; }
  &.mdb { margin-bottom: 0.5rem; }
  &.lgb { margin-bottom: 1rem; }
}

.rollable:hover,
.rollable:focus {
  color: #000;
  text-shadow: 0 0 10px @color-acid-green;
  cursor: pointer;
  .transition();
}

.rollable {
  .transition();

  // Affordance légère au repos : la zone est cliquable.
  i.fa-dice-d10,
  i.fa-dice {
    font-size: 0.8em;
    color: @color-acid-green;
  }
}

// Sur la fiche créature, les valeurs lançables (Attaque…) sont fortement
// matérialisées : pastille de dé + bordure pointillée.
.application.sheet.vermine2047.creature {
  .rollable {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 5px;
    border-radius: 3px;
    color: @theme-color-light;
    border: 1px dashed fade(@color-acid-green, 45%);
    background: fade(@color-acid-green, 8%);
    cursor: pointer;
  }
}

img.profile-img {
  filter: drop-shadow(0px 0px 20px rgb(110, 133, 27));
  height: auto;
  width: 100%;
  max-width: 10rem;
}

body.system-vermine2047 img#logo {
  content: url("@{assets-path}/images/ui/logo_vermine_foundry.webp");
  height: auto;
}

#chat-log,
.chat-log {
  .message {
    .background-image(url("@{ui-path}/box_background.webp"), repeat);
  }
}

.grid {
  display: grid;
  grid-column: span 2 / span 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 5px 0;
  padding: 0;
}

.grid-2col { .grid(); }
.grid-3col { grid-column: span 3; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4col { grid-column: span 4; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5col { grid-column: span 5; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-6col { grid-column: span 6; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-7col { grid-column: span 7; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.grid-8col { grid-column: span 8; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.grid-9col { grid-column: span 9; grid-template-columns: repeat(9, minmax(0, 1fr)); }
.grid-10col { grid-column: span 10; grid-template-columns: repeat(10, minmax(0, 1fr)); }
.grid-11col { grid-column: span 11; grid-template-columns: repeat(11, minmax(0, 1fr)); }
.grid-12col { grid-column: span 12; grid-template-columns: repeat(12, minmax(0, 1fr)); }

.grid-start-2 { grid-column-start: 2; }
.grid-start-3 { grid-column-start: 3; }
.grid-start-4 { grid-column-start: 4; }
.grid-start-5 { grid-column-start: 5; }
.grid-start-6 { grid-column-start: 6; }
.grid-start-7 { grid-column-start: 7; }
.grid-start-8 { grid-column-start: 8; }
.grid-start-9 { grid-column-start: 9; }
.grid-start-10 { grid-column-start: 10; }
.grid-start-11 { grid-column-start: 11; }
.grid-start-12 { grid-column-start: 12; }

.grid-span-2 { grid-column-end: span 2; }
.grid-span-3 { grid-column-end: span 3; }
.grid-span-4 { grid-column-end: span 4; }
.grid-span-5 { grid-column-end: span 5; }
.grid-span-6 { grid-column-end: span 6; }
.grid-span-7 { grid-column-end: span 7; }
.grid-span-8 { grid-column-end: span 8; }
.grid-span-9 { grid-column-end: span 9; }
.grid-span-10 { grid-column-end: span 10; }
.grid-span-11 { grid-column-end: span 11; }
.grid-span-12 { grid-column-end: span 12; }

.flex-group-center,
.flex-group-left,
.flex-group-right {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.flex-group-left {
  justify-content: flex-start;
  text-align: left;
}

.flex-group-right {
  justify-content: flex-end;
  text-align: right;
}

.flex-align-left { align-items: flex-start; }
.flex-align-right { align-items: flex-end; }
.gap-xs { gap: 2px; }
.gap-sm { gap: 4px; }
.gap-md { gap: 8px; }
.gap-lg { gap: 16px; }
.flexshrink { flex: 0; }
.flex-between { justify-content: space-between; }
.flexlarge { flex: 2; }

.align-left {
  justify-content: flex-start;
  text-align: left;
}

.align-right {
  justify-content: flex-end;
  text-align: right;
}

.align-center {
  justify-content: center;
  text-align: center;
}

::-webkit-scrollbar-thumb {
  outline: none;
  border-radius: 3px;
  background: #577822;
  border: 1px solid var(--color-border-highlight);
}

::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

.system-vermine2047 {
  .item-form {
    font-family: "Roboto", sans-serif;
  }

  .sheet-header {
    flex: 0 auto;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 10px;

    .profile-img {
      flex: 0 0 100px;
      height: 100px;
      margin-right: 10px;
    }

    .header-fields {
      flex: 1;
    }

    h1.charname {
      height: 50px;
      padding: 0px;
      margin: 5px 0;
      border-bottom: 0;

      input {
        width: 100%;
        height: 100%;
        margin: 0;
      }
    }
  }

  .sheet-tabs {
    flex: 0;
  }

  .sheet-body .tab,
  .editor {
    height: 100%;
    width: 100%;
  }

  .editor {
    min-height: 75px;
    margin-bottom: 1rem;
    min-width: 100%;

    .editor-content {
      min-width: 100%;
      min-height: 3rem;
    }
  }

  .editor:hover .editor-edit {
    display: block;
  }

  .tox {
    min-height: 25vh;

    .tox-editor-container {
      background: #fff;
    }

    .tox-edit-area {
      padding: 0 8px;
    }
  }

  .resource-label {
    font-weight: bold;
  }

  .items-header {
    height: 28px;
    margin: 2px 0;
    padding: 0;
    align-items: center;
    background: rgba(0, 0, 0, 0.05);
    border: 2px groove #eeede0;
    font-weight: bold;

    > * {
      font-size: 14px;
      text-align: center;
    }

    .item-name {
      font-weight: bold;
      padding-left: 5px;
      text-align: left;
      display: flex;
    }
  }

  .items-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    color: #444;

    .item-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .item-name {
      flex: 2;
      margin: 0;
      overflow: hidden;
      font-size: 13px;
      text-align: left;
      align-items: center;
      display: flex;

      h3, h4 {
        margin: 0;
        white-space: nowrap;
        overflow-x: hidden;
      }
    }

    .item-controls {
      display: flex;
      flex: 0;
      justify-content: flex-end;

      a {
        font-size: 12px;
        text-align: center;
        margin: 0 6px;
      }
    }

    .item {
      align-items: center;
      padding: 0 2px;
      border-bottom: 1px solid #c9c7b8;

      &:last-child {
        border-bottom: none;
      }

      .item-name {
        color: @theme-color-dark;

        .item-image {
          flex: 0 0 30px;
          height: 30px;
          background-size: 30px;
          border: none;
          margin-right: 5px;
        }
      }

      .item-prop {
        text-align: center;
        border-left: 1px solid #c9c7b8;
        border-right: 1px solid #c9c7b8;
        font-size: 12px;
      }

      .items-header {
        height: 28px;
        margin: 2px 0;
        padding: 0;
        align-items: center;
        background: rgba(0, 0, 0, 0.05);
        border: 2px groove #eeede0;
        font-weight: bold;

        > * {
          font-size: 12px;
          text-align: center;
        }

        .item-name {
          padding: 0 2px 0 5px;
          text-align: left;
        }
      }
    }

    .effects .item {
      .effect-source,
      .effect-duration,
      .effect-controls {
        text-align: center;
        border-left: 1px solid #c9c7b8;
        border-right: 1px solid #c9c7b8;
        font-size: 12px;
      }

      .effect-controls {
        border: none;
      }
    }
  }

  .item-formula {
    flex: 0 0 200px;
    padding: 0 8px;
  }
}

span.game-mode {
  font-family: "DistressBlack", sans-serif;
  position: absolute;
  margin-left: auto;
  color: rgba(0, 0, 0, 0);
  top: 1rem;
  z-index: 900;
  width: 55%;
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.767) 0%,
    rgba(0, 0, 0, 0.61) 17%,
    rgba(0, 0, 0, 0.548) 19%,
    rgba(222, 255, 221, 0.575) 24%,
    rgba(255, 255, 255, 0.637) 43%,
    rgba(0, 0, 0, 0.486) 47%,
    rgba(254, 255, 254, 0.466) 50%,
    rgba(0, 0, 0, 0.699) 63%,
    rgba(134, 160, 137, 0.479) 64%,
    rgba(213, 248, 210, 0.493) 100%
  );
  background-clip: text;
}

span.game-mode#game-mode-1 { color: @game-mode-1-color; }
span.game-mode#game-mode-2 { color: @game-mode-2-color; }
span.game-mode#game-mode-3 { color: @game-mode-3-color; }

.shadow {
  .shadow();
}

ol#chat-log,
ol.chat-log {
  header.message-header {
    background-color: #000;
    padding: 0 1rem;
  }

  .vermine-roll-message {
    overflow: hidden;
    padding: 4px 10px 10px;
    position: relative;

    > h3 {
      font-family: "DistressBlack";
      text-transform: uppercase;
      font-size: @font-size-14;
      margin: 6px 0 8px;
      padding: 4px 10px;
      background: 50% 0% / cover no-repeat url("@{ui-path}/scotch.webp");
      box-shadow: 0px 0px 3px rgba(31, 26, 26, 0.3) inset;
      font-weight: 900;
      border-bottom: none;
    }

    > .flexrow:not(.roll-total):not(.roll-results) {
      align-items: center;
      gap: 6px;
      margin: 4px 0;

      h4 {
        font-family: "DistressBlack";
        text-transform: uppercase;
        font-size: @font-size-12;
        margin: 0;
        border-bottom: none;
        font-weight: 900;
      }

      span {
        font-family: "Roboto", sans-serif;
        font-size: @font-size-12;
      }
    }

    // ── Reroll section ──────────────────────────────────────────────
    .reroll-fromroll {
      > h4 {
        font-family: "DistressBlack";
        text-transform: uppercase;
        font-size: @font-size-12;
        margin: 6px 0 4px;
        border-bottom: none;
        font-weight: 900;

        #allowed_reroll {
          font-size: @font-size-12;
        }
      }
    }

    div.reroll {
      .transition(0.3s);
      max-height: 1px;
      overflow: hidden;
      justify-content: flex-end;
      align-items: center;
      gap: 8px;

      button {
        text-transform: uppercase;
        font-family: "DistressBlack";
        font-size: @font-size-12;
        padding: 2px 12px;
        max-width: fit-content;
        box-shadow: 0px 0px 2px #000;
        .background-image(url("@{ui-path}/scotch.webp"), no-repeat, cover, 50% 0%);
      }

      &.visible { max-height: 15rem; }
    }

    .reroll-from-effort {
      h4.flexcol { gap: 2px; }
      .effort-pool {
        font-size: @font-size-12;
        opacity: 0.8;
        text-align: center;
      }
    }

    // ── Mentions de bienvenue / crédits ──────────────────────────────
    .vermine-credits {
      font-size: @font-size-12;
      opacity: 0.8;
      line-height: 1.4;
      margin: 4px 0 0;

      a { color: inherit; }
    }

    // ── Dice results ────────────────────────────────────────────────
    ul.roll-results {
      list-style: none;
      padding: 6px 0;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;

      li.die {
        position: relative;
        width: 3rem;
        height: 3rem;
        flex: none;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        .transition();
        border-bottom: 4px solid @color-hemolymph;
        border-radius: 50%;

        &:after {
          content: "";
          position: absolute;
          top: -1rem;
          text-wrap: nowrap;
          color: #fff;
          font-weight: 100;
          font-size: smaller;
          text-align: center;
          opacity: 0;
          text-shadow: 0px 0px 5px #000;
        }

        &:hover::after {
          opacity: 1;
          color: #fff;
        }

        &.human { border-top: 4px solid @totem-human-color; }
        &.adapted { border-top: 4px solid @totem-adapted-color; }
        &.rerollable {
          cursor: pointer;
          &:hover { transform: translateY(0.5rem); }
        }
        &.success {
          border-bottom-color: @color-acid-green;
          border-bottom-width: 6px;
          box-shadow: 0 0 8px fade(@color-acid-green, 55%);
        }
        &.adapted::after { content: "adapté"; }
        &.human::after { content: "humain"; }
        &.rerolled { transform: translateY(0rem); }

        span {
          display: none;
        }

        &:not([data-result]) {
          background-image: url("@{dice-path}/d10c-1.webp");
          opacity: 0.5;
          filter: grayscale(1);
        }
      }

      // Per-face dice background images
      .generate-dice-faces(@i: 1) when (@i =< 10) {
        li.die[data-result="@{i}"] {
          background-image: url("@{dice-path}/d10c-@{i}.webp");
        }
        .generate-dice-faces(@i + 1);
      }
      .generate-dice-faces();
    }

    // ── Total section ───────────────────────────────────────────────
    div.roll-total {
      margin-top: 8px;
      padding: 8px 16px;
      background: 50% 0% / cover no-repeat url("@{ui-path}/scotch.webp");
      box-shadow: 0px 0px 3px rgba(31, 26, 26, 0.3) inset;
      border-radius: 2px;
      gap: 16px;
      justify-content: center;

      > div {
        display: flex;
        align-items: center;
        gap: 6px;
      }

      h4 {
        font-family: "DistressBlack";
        text-transform: uppercase;
        font-size: @font-size-12;
        margin: 0;
        border-bottom: none;
        font-weight: 900;
        text-align: center;
      }

      span {
        font-family: "DistressBlack";
        font-size: @font-size-20;
      }

      #total {
        color: @color-acid-green;
        text-shadow: 0 0 4px fade(@color-acid-green, 40%);
      }

      #required {
        color: @color-text-light-2;
      }
    }

    // ── Verdict ───────────────────────────────────────────────────────
    .roll-verdict {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin: 6px 0;
      padding: 6px 12px;
      border-radius: 3px;
      font-family: "DistressBlack";
      text-transform: uppercase;
      font-size: @font-size-16;
      letter-spacing: 0.5px;

      &.success {
        color: @color-acid-green;
        background: fade(@color-acid-green, 15%);
        border: 1px solid @color-acid-green;
      }

      &.failure {
        color: @color-hemolymph;
        background: fade(@color-hemolymph, 15%);
        border: 1px solid @color-hemolymph;
      }
    }

    // ── Contexte du jet ───────────────────────────────────────────────
    div.roll-context {
      gap: 6px 12px;
      margin: 4px 0 6px;
      padding: 6px 8px;
      background: rgba(0, 0, 0, 0.06);

      .context-item {
        display: inline-flex;
        align-items: center;
        gap: 5px;

        .context-label {
          font-family: "DistressBlack";
          text-transform: uppercase;
          font-size: @font-size-11;
          opacity: 0.8;
        }

        .context-value {
          font-family: "Roboto", sans-serif;
          font-size: @font-size-12;
          font-weight: 600;
        }

        &.totem-human .context-value { color: @totem-human-color; }
        &.totem-adapted .context-value { color: @totem-adapted-color; }
      }
    }

    // ── Arme du jet ───────────────────────────────────────────────────
    div.weapon-block {
      margin: 4px 0 6px;
      padding: 6px 8px;
      border: 1px solid @color-hemolymph;
      background: rgba(0, 0, 0, 0.1);

      .weapon-block-header {
        align-items: center;
        gap: 6px;
        margin-bottom: 2px;

        .weapon-icon {
          color: @color-hemolymph;
        }

        .weapon-name {
          font-family: "DistressBlack";
          text-transform: uppercase;
          font-size: @font-size-12;
          font-weight: 900;
          color: @theme-color-dark;
        }

        .weapon-targets {
          margin-left: auto;
          font-family: "Roboto", sans-serif;
          font-size: @font-size-11;
          color: @theme-color-accent;
        }
      }

      .weapon-details {
        gap: 4px 12px;

        .weapon-detail {
          font-family: "Roboto", sans-serif;
          font-size: @font-size-11;

          strong {
            text-transform: uppercase;
          }
        }
      }

      .weapon-traits {
        gap: 4px 6px;
        margin-top: 4px;
        padding-top: 4px;
        border-top: 1px dashed fade(@color-hemolymph, 35%);
        align-items: center;

        .weapon-traits-label {
          flex: none;
        }

        .weapon-trait {
          flex: none;
          font-family: "Roboto", sans-serif;
          font-size: @font-size-11;
          font-weight: 600;
          padding: 1px 6px;
          border: 1px solid @color-border-dark-4;
          border-radius: 3px;
          background: fade(@color-acid-green, 10%);
          cursor: help;
        }
      }

      .duree-note {
        margin-top: 4px;
        font-family: "Roboto", sans-serif;
        font-size: @font-size-11;
        font-style: italic;
        color: @theme-color-accent;

        i { color: @color-hemolymph; }
      }
    }

    // ── Échange de coups ─────────────────────────────────────────────
    div.exchange-actions {
      margin: 4px 0 6px;
      padding: 6px 8px;
      border: 1px dashed @color-hemolymph;
      background: fade(@color-hemolymph, 8%);

      .exchange-header {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 4px;
        font-family: "DistressBlack";
        text-transform: uppercase;
        font-size: @font-size-12;
        font-weight: 900;
        color: @theme-color-dark;

        i { color: @color-hemolymph; }
      }

      .exchange-reminder {
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: "Roboto", sans-serif;
        font-size: @font-size-11;
        font-style: italic;
        color: @theme-color-accent;
        padding: 2px 0;

        i { color: @color-hemolymph; }
      }

      .exchange-target {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        padding: 3px 0;

        .exchange-target-name {
          font-family: "Roboto", sans-serif;
          font-size: @font-size-11;
          color: @theme-color-accent;
        }

        button.exchange-defend {
          font-family: "Roboto", sans-serif;
          font-size: @font-size-11;
          padding: 2px 8px;
          cursor: pointer;
          color: @color-chitin-dark;
          background: @color-text-light-0;
          border: 1px solid @color-border-dark-4;
          border-radius: 3px;
          .transition();

          &:hover {
            color: @color-text-light-0;
            background: @color-hemolymph;
            border-color: @color-hemolymph;
          }
        }

        .exchange-passive {
          font-family: "Roboto", sans-serif;
          font-size: @font-size-11;
          color: @color-text-light-2;
          opacity: 0.85;
          font-style: italic;
        }
      }

      button.exchange-resolve {
        margin-top: 4px;
        font-family: "DistressBlack";
        text-transform: uppercase;
        font-size: @font-size-11;
        padding: 3px 12px;
        cursor: pointer;
        color: @theme-color-dark;
        background: fade(@color-hemolymph, 25%);
        border: 1px solid @color-hemolymph;
        border-radius: 3px;
        .transition();

        &:hover {
          color: @theme-color-dark;
          background: @color-hemolymph;
        }
      }

      button.exchange-incapacitant,
      button.exchange-zone {
        margin-top: 4px;
        font-family: "DistressBlack";
        text-transform: uppercase;
        font-size: @font-size-11;
        padding: 3px 10px;
        cursor: pointer;
        color: @theme-color-dark;
        background: fade(@color-acid-green, 20%);
        border: 1px solid @color-acid-green;
        border-radius: 3px;
        .transition();

        &:hover {
          color: @theme-color-dark;
          background: @color-acid-green;
        }

        &:disabled {
          opacity: 0.6;
          cursor: default;
        }
      }
    }

    div.exchange-resolution {
      margin: 4px 0 6px;
      padding: 6px 8px;
      border: 1px solid @color-hemolymph;
      background: fade(@color-hemolymph, 8%);

      .resolution-header {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 4px;
        font-family: "DistressBlack";
        text-transform: uppercase;
        font-size: @font-size-12;
        font-weight: 900;
        color: @theme-color-dark;

        i { color: @color-hemolymph; }
      }

      .resolution-line {
        font-family: "Roboto", sans-serif;
        font-size: @font-size-11;
        padding: 1px 0;

        strong { font-weight: 700; }

        .res-hit { color: @color-hemolymph; font-weight: 700; }
        .res-dodged,
        .res-parried { color: @color-acid-green; font-weight: 700; }
        &.res-wound { color: @color-hemolymph; font-weight: 700; }
        &.res-noshock,
        &.res-nodamage { color: @color-acid-green; }
      }

      button.exchange-apply {
        margin-top: 6px;
        font-family: "DistressBlack";
        text-transform: uppercase;
        font-size: @font-size-11;
        padding: 3px 12px;
        cursor: pointer;
        color: @theme-color-dark;
        background: fade(@color-hemolymph, 25%);
        border: 1px solid @color-hemolymph;
        border-radius: 3px;
        .transition();

        &:hover:not(:disabled) {
          color: @theme-color-dark;
          background: @color-hemolymph;
        }

        &:disabled {
          opacity: 0.7;
          cursor: default;
          color: @color-acid-green;
          border-color: @color-acid-green;
        }
      }
    }

    // ── Composition du jet ────────────────────────────────────────────
    div.roll-pool {
      margin: 4px 0;

      h4 {
        font-family: "DistressBlack";
        text-transform: uppercase;
        font-size: @font-size-11;
        margin: 4px 0;
        border-bottom: none;
      }

      .pool-breakdown {
        gap: 4px 10px;

        .pool-item {
          font-family: "Roboto", sans-serif;
          font-size: @font-size-11;

          &.pool-total {
            font-weight: 700;
            color: @theme-color-light;
          }
        }
      }
    }

    // ── Résumé des dés ────────────────────────────────────────────────
    div.roll-dice-summary {
      gap: 6px 12px;
      justify-content: center;
      margin: 4px 0 2px;
      padding: 4px 8px;
      background: rgba(0, 0, 0, 0.06);

      .die-summary {
        font-family: "Roboto", sans-serif;
        font-size: @font-size-11;

        &.human { color: @totem-human-color; }
        &.adapted { color: @totem-adapted-color; }
      }
    }
  }

  div.item-card header img {
    max-width: 30%;
  }
}

// Padding supplémentaire pour les fiches groupe, npc, créature et communauté
.system-vermine2047 {
  .group-content,
  .npc-content,
  .creature-content,
  .community-content {
    padding: 15px;
  }
}

// ── Onglet Expérience ─────────────────────────────────────────────────
.tab.experience {
  .experience-summary {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;

    .exp-stat {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 8px;
      border: 1px solid @color-border-dark-4;
      background: fade(@color-chitin-dark, 30%);

      label {
        font-family: "DistressBlack", sans-serif;
        text-transform: uppercase;
        font-size: @font-size-11;
        color: @color-text-light-2;
      }

      .exp-value {
        font-family: "DistressBlack", sans-serif;
        font-size: @font-size-24;
        color: @color-acid-green;
      }
    }
  }

  .exp-actions {
    gap: 8px;
    margin-bottom: 10px;

    button {
      font-family: "DistressBlack", sans-serif;
      text-transform: uppercase;
      font-size: @font-size-12;
      padding: 5px 14px;
      cursor: pointer;
      color: @theme-color-dark;
      background: fade(@color-hemolymph, 20%);
      border: 1px solid @color-hemolymph;
      border-radius: 3px;
      .transition();

      &:hover {
        color: @theme-color-dark;
        background: @color-hemolymph;
      }
    }
  }

  .exp-rewards {
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid @color-border-dark-4;
    background: fade(@color-chitin-dark, 20%);

    h4 {
      font-family: "DistressBlack", sans-serif;
      text-transform: uppercase;
      font-size: @font-size-12;
      color: @theme-color-dark;
      margin: 0 0 6px;

      .exp-total {
        color: @color-text-light-2;
      }
    }

    .exp-reward-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      font-size: @font-size-12;

      label {
        font-family: "DistressBlack", sans-serif;
        text-transform: uppercase;
        font-size: @font-size-11;
        color: @color-text-light-2;
      }
    }

    .exp-learned {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;

      span {
        padding: 2px 8px;
        font-size: @font-size-11;
        border: 1px solid @color-border-dark-4;
        border-radius: 3px;
        opacity: 0.6;

        &.learned {
          opacity: 1;
          color: @color-acid-green;
          border-color: @color-acid-green;
        }
      }
    }
  }
}

// ── Test de Fiabilité / Réparations ──────────────────────────────────
.vermine-reliability-message {
  padding: 4px 10px 10px;

  .reliability-header {
    align-items: center;
    gap: 8px;

    img {
      flex: 0 0 auto;
      width: 36px;
      height: 36px;
      object-fit: cover;
      border-radius: 3px;
      border: 1px solid @color-border-dark-4;
    }

    h3 {
      font-family: "DistressBlack";
      text-transform: uppercase;
      font-size: @font-size-13;
      margin: 0;
      border-bottom: none;
      color: @theme-color-dark;
    }
  }

  .reliability-meta {
    gap: 4px 12px;
    margin: 4px 0 6px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 3px;

    .reliability-meta-item {
      font-family: "Roboto", sans-serif;
      font-size: @font-size-11;
      color: @color-text-dark-primary;

      strong {
        text-transform: uppercase;
      }
    }
  }

  .reliability-results {
    gap: 6px;
    margin: 6px 0;

    .reliability-die {
      flex: none;
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "DistressBlack";
      font-size: @font-size-16;
      border: 1px solid @color-border-dark-4;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.08);
      color: @color-text-dark-primary;

      &.damage {
        border-color: @color-hemolymph;
        background: fade(@color-hemolymph, 15%);
        color: @color-hemolymph;
        font-weight: 900;
      }

      &.success {
        border-color: @color-acid-green;
        background: fade(@color-acid-green, 15%);
        color: @color-acid-green;
        font-weight: 900;
      }
    }
  }

  .reliability-summary {
    gap: 4px 16px;
    margin: 4px 0;
    font-family: "Roboto", sans-serif;
    font-size: @font-size-12;
    color: @color-text-dark-primary;

    strong {
      text-transform: uppercase;
    }
  }

  .reliability-note {
    margin: 2px 0;
    font-size: @font-size-11;
    font-style: italic;
    color: @color-text-dark-secondary;
  }

  .reliability-destroyed {
    margin: 6px 0 0;
    padding: 4px 8px;
    font-family: "DistressBlack";
    text-transform: uppercase;
    font-size: @font-size-12;
    text-align: center;
    color: @color-hemolymph;
    border: 1px solid @color-hemolymph;
    border-radius: 3px;
    background: fade(@color-hemolymph, 12%);
  }
}

.item .reliability-actions {
  gap: 6px;
  justify-content: center;
  margin: 4px 0 8px;

  button {
    font-family: "DistressBlack", sans-serif;
    text-transform: uppercase;
    font-size: @font-size-11;
    padding: 3px 12px;
    cursor: pointer;
    color: @theme-color-dark;
    background: fade(@color-hemolymph, 15%);
    border: 1px solid @color-hemolymph;
    border-radius: 3px;
    .transition();

    &:hover {
      color: @theme-color-dark;
      background: @color-hemolymph;
    }

    i {
      margin-right: 4px;
    }
  }
}

.reliability-option {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: @font-size-12;
  color: @color-text-dark-primary;

  input[type="checkbox"],
  input[type="radio"] {
    flex: none;
  }
}

.reliability-severities,
.reliability-modes {
  gap: 8px;
}

.reliability-hint {
  margin: 0;
  font-size: @font-size-11;
  font-style: italic;
  color: @color-text-dark-secondary;
}
