/* V1.61 outcome language: verdict rails show the actual resolved result, not only the command. */
html body:not(.maintenance-mode) #fxLayer .settlement-reveal {
  --settlement-outcome-rgb: 190, 201, 211;
  grid-template-columns: 70px minmax(0, 1fr) minmax(68px, auto) !important;
  grid-template-areas:
    "kicker title action"
    "kicker meta outcome" !important;
}

html body:not(.maintenance-mode) #fxLayer .settlement-reveal[data-settlement-focus="hero"] {
  grid-template-columns: 86px minmax(0, 1fr) minmax(78px, auto) !important;
}

html body:not(.maintenance-mode) #fxLayer .settlement-reveal[data-settlement-outcome="damage"] { --settlement-outcome-rgb: 241, 103, 82; }
html body:not(.maintenance-mode) #fxLayer .settlement-reveal[data-settlement-outcome="blocked"] { --settlement-outcome-rgb: 104, 181, 235; }
html body:not(.maintenance-mode) #fxLayer .settlement-reveal[data-settlement-outcome="guard"] { --settlement-outcome-rgb: 94, 211, 219; }
html body:not(.maintenance-mode) #fxLayer .settlement-reveal[data-settlement-outcome="heal"] { --settlement-outcome-rgb: 104, 222, 143; }
html body:not(.maintenance-mode) #fxLayer .settlement-reveal[data-settlement-outcome="resource"] { --settlement-outcome-rgb: 240, 193, 80; }
html body:not(.maintenance-mode) #fxLayer .settlement-reveal[data-settlement-outcome="effect"] { --settlement-outcome-rgb: 202, 136, 235; }
html body:not(.maintenance-mode) #fxLayer .settlement-reveal[data-settlement-outcome="neutral"] { --settlement-outcome-rgb: 164, 176, 187; }

html body:not(.maintenance-mode) #fxLayer .settlement-reveal > b {
  grid-area: action !important;
  align-self: end !important;
  min-width: 0 !important;
  padding: 3px 6px 4px !important;
  border-color: rgba(var(--settlement-focus-rgb), 0.32) !important;
  color: rgba(var(--settlement-focus-rgb), 0.82) !important;
  -webkit-text-fill-color: rgba(var(--settlement-focus-rgb), 0.82) !important;
  background: rgba(var(--settlement-focus-rgb), 0.065) !important;
  box-shadow: none !important;
  font-size: 8px !important;
  letter-spacing: 0.05em !important;
}

html body:not(.maintenance-mode) #fxLayer .settlement-reveal > .settlement-outcome {
  grid-area: outcome !important;
  align-self: start !important;
  min-width: 0 !important;
  display: block !important;
  overflow: hidden !important;
  padding: 4px 6px 5px !important;
  border: 1px solid rgba(var(--settlement-outcome-rgb), 0.5) !important;
  border-radius: 6px !important;
  color: rgb(var(--settlement-outcome-rgb)) !important;
  -webkit-text-fill-color: rgb(var(--settlement-outcome-rgb)) !important;
  background:
    linear-gradient(180deg, rgba(var(--settlement-outcome-rgb), 0.14), rgba(var(--settlement-outcome-rgb), 0.07)),
    rgba(5, 9, 14, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 10px rgba(var(--settlement-outcome-rgb), 0.13) !important;
  font-size: 9px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0.025em !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.64) !important;
  white-space: nowrap !important;
  animation: settlement-outcome-enter 460ms 80ms cubic-bezier(0.16, 0.84, 0.24, 1) both;
}

html body:not(.maintenance-mode) #fxLayer .settlement-reveal[data-settlement-outcome="blocked"] > .settlement-outcome,
html body:not(.maintenance-mode) #fxLayer .settlement-reveal[data-settlement-outcome="guard"] > .settlement-outcome {
  background:
    linear-gradient(180deg, rgba(var(--settlement-outcome-rgb), 0.17), rgba(var(--settlement-outcome-rgb), 0.075)),
    repeating-linear-gradient(135deg, transparent 0 5px, rgba(var(--settlement-outcome-rgb), 0.035) 5px 7px),
    rgba(5, 9, 14, 0.44) !important;
}

html body:not(.maintenance-mode) #fxLayer .settlement-reveal[data-settlement-outcome="damage"] > .settlement-outcome {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 13px rgba(var(--settlement-outcome-rgb), 0.2) !important;
}

@keyframes settlement-outcome-enter {
  0% { opacity: 0; filter: brightness(1.45); }
  28% { opacity: 1; filter: brightness(1.15); }
  100% { opacity: 1; filter: brightness(1); }
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) #fxLayer .settlement-reveal,
  html body:not(.maintenance-mode) #fxLayer .settlement-reveal[data-settlement-focus="hero"] {
    grid-template-columns: 52px minmax(0, 1fr) minmax(58px, auto) !important;
    column-gap: 6px !important;
  }

  html body:not(.maintenance-mode) #fxLayer .settlement-reveal > b {
    padding: 2px 4px 3px !important;
    font-size: 7px !important;
  }

  html body:not(.maintenance-mode) #fxLayer .settlement-reveal > .settlement-outcome {
    padding: 3px 4px 4px !important;
    font-size: 7.5px !important;
    letter-spacing: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body:not(.maintenance-mode) #fxLayer .settlement-reveal > .settlement-outcome {
    animation: none !important;
  }
}