/* V1.60 settlement verdict rail: routine actions stay compact; hero skills earn visual priority. */
html body:not(.maintenance-mode) #fxLayer .settlement-reveal {
  --settlement-focus-rgb: 218, 174, 92;
  position: fixed !important;
  left: 50% !important;
  top: max(46px, calc(env(safe-area-inset-top) + 46px)) !important;
  bottom: auto !important;
  z-index: 259 !important;
  width: min(440px, calc(100vw - 28px)) !important;
  min-height: 52px !important;
  display: grid !important;
  grid-template-columns: 70px minmax(0, 1fr) auto !important;
  grid-template-areas:
    "kicker title action"
    "kicker meta action" !important;
  align-items: center !important;
  justify-items: stretch !important;
  column-gap: 11px !important;
  row-gap: 2px !important;
  padding: 7px 11px 8px 9px !important;
  border: 1px solid rgba(var(--settlement-focus-rgb), 0.58) !important;
  border-radius: 12px !important;
  color: #fff8e7 !important;
  background:
    linear-gradient(104deg, rgba(var(--settlement-focus-rgb), 0.17), transparent 36%),
    linear-gradient(180deg, rgba(19, 27, 38, 0.97), rgba(5, 9, 15, 0.98)) !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.42),
    0 0 17px rgba(var(--settlement-focus-rgb), 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  overflow: hidden !important;
  pointer-events: none !important;
  transform-origin: 50% 0 !important;
  backdrop-filter: blur(10px) saturate(1.08) !important;
  contain: paint;
  animation: settlement-focus-arrive 720ms cubic-bezier(0.16, 0.84, 0.24, 1) both !important;
}

html body:not(.maintenance-mode) #fxLayer .settlement-reveal.attack { --settlement-focus-rgb: 235, 91, 76; }
html body:not(.maintenance-mode) #fxLayer .settlement-reveal.defend { --settlement-focus-rgb: 82, 177, 229; }
html body:not(.maintenance-mode) #fxLayer .settlement-reveal.charge { --settlement-focus-rgb: 238, 188, 70; }
html body:not(.maintenance-mode) #fxLayer .settlement-reveal.skill { --settlement-focus-rgb: 156, 119, 232; }
html body:not(.maintenance-mode) #fxLayer .settlement-reveal.deny { --settlement-focus-rgb: 226, 94, 94; }

html body:not(.maintenance-mode) #fxLayer .settlement-reveal::before,
html body:not(.maintenance-mode) #fxLayer .settlement-reveal::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

html body:not(.maintenance-mode) #fxLayer .settlement-reveal::before {
  top: 7px;
  bottom: 7px;
  left: 4px;
  width: 2px;
  border-radius: 999px;
  background: rgb(var(--settlement-focus-rgb));
  box-shadow: 0 0 9px rgba(var(--settlement-focus-rgb), 0.62);
}

html body:not(.maintenance-mode) #fxLayer .settlement-reveal::after {
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--settlement-focus-rgb), 0.88) 30% 70%, transparent);
  opacity: 0.76;
}

html body:not(.maintenance-mode) #fxLayer .settlement-reveal > span {
  grid-area: kicker !important;
  align-self: stretch !important;
  display: grid !important;
  place-items: center !important;
  padding-right: 8px !important;
  border-right: 1px solid rgba(var(--settlement-focus-rgb), 0.28) !important;
  color: rgba(var(--settlement-focus-rgb), 0.96) !important;
  -webkit-text-fill-color: rgba(var(--settlement-focus-rgb), 0.96) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.06em !important;
  text-align: center !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) #fxLayer .settlement-reveal > strong {
  grid-area: title !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #fff8e9 !important;
  -webkit-text-fill-color: #fff8e9 !important;
  font-size: clamp(14px, 1.65vw, 19px) !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.035em !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.74), 0 0 9px rgba(var(--settlement-focus-rgb), 0.2) !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) #fxLayer .settlement-reveal > small {
  grid-area: meta !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(221, 230, 236, 0.68) !important;
  -webkit-text-fill-color: rgba(221, 230, 236, 0.68) !important;
  font-size: 9px !important;
  font-weight: 650 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.02em !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) #fxLayer .settlement-reveal > b {
  grid-area: action !important;
  min-width: 44px !important;
  padding: 5px 7px 6px !important;
  border: 1px solid rgba(var(--settlement-focus-rgb), 0.48) !important;
  border-radius: 7px !important;
  color: rgb(var(--settlement-focus-rgb)) !important;
  -webkit-text-fill-color: rgb(var(--settlement-focus-rgb)) !important;
  background: rgba(var(--settlement-focus-rgb), 0.1) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 10px rgba(var(--settlement-focus-rgb), 0.12) !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
  text-align: center !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) #fxLayer .settlement-reveal[data-settlement-focus="hero"] {
  --settlement-focus-rgb: 214, 166, 255;
  width: min(520px, calc(100vw - 28px)) !important;
  min-height: 66px !important;
  grid-template-columns: 86px minmax(0, 1fr) auto !important;
  column-gap: 13px !important;
  padding: 9px 14px 10px 11px !important;
  border-color: rgba(var(--settlement-focus-rgb), 0.8) !important;
  background:
    radial-gradient(circle at 19% 50%, rgba(var(--settlement-focus-rgb), 0.19), transparent 31%),
    linear-gradient(112deg, rgba(242, 204, 117, 0.1), transparent 38%),
    linear-gradient(180deg, rgba(25, 23, 43, 0.98), rgba(7, 8, 18, 0.99)) !important;
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.48),
    0 0 26px rgba(var(--settlement-focus-rgb), 0.25),
    inset 0 1px 0 rgba(255, 247, 220, 0.14) !important;
  animation-name: settlement-focus-hero-arrive !important;
}

html body:not(.maintenance-mode) #fxLayer .settlement-reveal[data-settlement-focus="hero"]::after {
  top: 0;
  right: auto;
  bottom: 0;
  left: -38%;
  width: 24%;
  height: auto;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  opacity: 0;
  animation: settlement-focus-hero-scan 640ms 70ms ease-out both;
}

html body:not(.maintenance-mode) #fxLayer .settlement-reveal[data-settlement-focus="hero"] > span {
  color: #f0ccff !important;
  -webkit-text-fill-color: #f0ccff !important;
  font-size: 9.5px !important;
}

html body:not(.maintenance-mode) #fxLayer .settlement-reveal[data-settlement-focus="hero"] > strong {
  font-size: clamp(17px, 2.15vw, 24px) !important;
  letter-spacing: 0.055em !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.76), 0 0 13px rgba(var(--settlement-focus-rgb), 0.32) !important;
}

html body:not(.maintenance-mode) #fxLayer .settlement-reveal[data-settlement-final="true"]:not([data-settlement-focus="hero"]) {
  box-shadow:
    0 13px 32px rgba(0, 0, 0, 0.44),
    0 0 21px rgba(var(--settlement-focus-rgb), 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.11) !important;
}

@keyframes settlement-focus-arrive {
  0% { opacity: 0; transform: translate(-50%, -7px) scaleX(0.86); filter: brightness(1.3); }
  17% { opacity: 1; transform: translate(-50%, 0) scaleX(1.012); filter: brightness(1.1); }
  30%, 76% { opacity: 1; transform: translate(-50%, 0) scaleX(1); filter: brightness(1); }
  100% { opacity: 0; transform: translate(-50%, -2px) scaleX(0.99); filter: brightness(1.05); }
}

@keyframes settlement-focus-hero-arrive {
  0% { opacity: 0; transform: translate(-50%, -9px) scale(0.96); filter: brightness(1.48); }
  18% { opacity: 1; transform: translate(-50%, 1px) scale(1.012); filter: brightness(1.16); }
  34%, 76% { opacity: 1; transform: translate(-50%, 0) scale(1); filter: brightness(1); }
  100% { opacity: 0; transform: translate(-50%, -3px) scale(1.005); filter: brightness(1.1); }
}

@keyframes settlement-focus-hero-scan {
  0% { left: -38%; opacity: 0; }
  25% { opacity: 0.82; }
  100% { left: 112%; opacity: 0; }
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) #fxLayer .settlement-reveal,
  html body:not(.maintenance-mode) #fxLayer .settlement-reveal[data-settlement-focus="hero"] {
    top: max(40px, calc(env(safe-area-inset-top) + 40px)) !important;
    width: calc(100vw - 16px) !important;
    min-height: 45px !important;
    grid-template-columns: 55px minmax(0, 1fr) auto !important;
    column-gap: 7px !important;
    padding: 6px 7px 7px 7px !important;
    border-radius: 9px !important;
  }

  html body:not(.maintenance-mode) #fxLayer .settlement-reveal[data-settlement-focus="hero"] {
    min-height: 54px !important;
  }

  html body:not(.maintenance-mode) #fxLayer .settlement-reveal > span,
  html body:not(.maintenance-mode) #fxLayer .settlement-reveal[data-settlement-focus="hero"] > span {
    padding-right: 5px !important;
    font-size: 7.5px !important;
    letter-spacing: 0.025em !important;
  }

  html body:not(.maintenance-mode) #fxLayer .settlement-reveal > strong {
    font-size: 12px !important;
    letter-spacing: 0.02em !important;
  }

  html body:not(.maintenance-mode) #fxLayer .settlement-reveal[data-settlement-focus="hero"] > strong {
    font-size: 14px !important;
  }

  html body:not(.maintenance-mode) #fxLayer .settlement-reveal > small {
    font-size: 7.5px !important;
  }

  html body:not(.maintenance-mode) #fxLayer .settlement-reveal > b {
    min-width: 34px !important;
    padding: 4px 5px 5px !important;
    font-size: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body:not(.maintenance-mode) #fxLayer .settlement-reveal,
  html body:not(.maintenance-mode) #fxLayer .settlement-reveal[data-settlement-focus="hero"],
  html body:not(.maintenance-mode) #fxLayer .settlement-reveal[data-settlement-focus="hero"]::after {
    animation: none !important;
  }
}