/* Standalone presentation skin for nexoria-damage-numbers.js.
   Position, transform and opacity are updated by its single rAF loop. */

:where(.nexoria-damage-number-layer) {
  position: fixed;
  inset: 0;
  z-index: 240;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  contain: layout style paint;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  font-synthesis: none;
}

.nexoria-damage-number-layer,
.nexoria-damage-number-layer * {
  box-sizing: border-box;
  pointer-events: none;
}

.nexoria-damage-number[hidden],
.nexoria-damage-number__critical[hidden] {
  display: none !important;
}

.nexoria-damage-number {
  --damage-fill-top: #fffef2;
  --damage-fill-bottom: #ffd968;
  --damage-outline: #741811;
  --damage-outline-deep: #280301;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-inline-size: 3ch;
  max-inline-size: min(16rem, calc(100vw - 1.5rem));
  translate: -50% -72%;
  color: var(--damage-fill-bottom);
  font-family: "Cinzel", "Trajan Pro", "Times New Roman", Georgia, serif;
  font-size: clamp(0.95rem, calc(0.7rem + 1.05vw), 1.25rem) !important;
  font-weight: 800;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 0.92;
  letter-spacing: 0.015em;
  text-align: center;
  white-space: nowrap;
  -webkit-text-stroke: 0.78px var(--damage-outline);
  paint-order: stroke fill;
  text-shadow:
    -1px -1px 0 var(--damage-outline),
    1px -1px 0 var(--damage-outline),
    -1px 1px 0 var(--damage-outline-deep),
    1px 1px 0 var(--damage-outline-deep),
    0 2px 0 var(--damage-outline-deep),
    0 3px 7px rgb(32 0 0 / 78%),
    0 0 6px rgb(255 97 38 / 34%);
  filter: drop-shadow(0 3px 2px rgb(0 0 0 / 52%));
  will-change: transform, opacity;
  cursor: default;
}

.nexoria-damage-number__value {
  display: block;
  direction: ltr;
  unicode-bidi: isolate;
  color: var(--damage-fill-bottom);
  background: linear-gradient(180deg, var(--damage-fill-top) 8%, #fff2af 48%, var(--damage-fill-bottom) 92%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nexoria-damage-number.is-critical,
.nexoria-damage-number--critical {
  --damage-fill-top: #fff6a7;
  --damage-fill-bottom: #ff9d22;
  --damage-outline: #8b1909;
  --damage-outline-deep: #300300;
  font-size: clamp(1.38rem, calc(1rem + 1.52vw), 1.8rem) !important;
  font-weight: 900;
  letter-spacing: 0.025em;
  -webkit-text-stroke-width: 1px;
  text-shadow:
    -1px -1px 0 var(--damage-outline),
    1px -1px 0 var(--damage-outline),
    -1px 1px 0 var(--damage-outline-deep),
    1px 1px 0 var(--damage-outline-deep),
    0 3px 0 var(--damage-outline-deep),
    0 4px 10px rgb(69 4 0 / 88%),
    0 0 8px rgb(255 132 20 / 86%),
    0 0 18px rgb(255 185 46 / 58%);
  filter:
    drop-shadow(0 3px 2px rgb(0 0 0 / 64%))
    drop-shadow(0 0 7px rgb(255 142 25 / 70%));
}

.nexoria-damage-number__critical {
  display: block;
  margin-block-start: 0.28em;
  padding: 0.18em 0.55em 0.16em;
  border: 1px solid rgb(255 213 96 / 88%);
  border-radius: 999px;
  color: #fff0a0;
  background: linear-gradient(180deg, rgb(103 16 5 / 92%), rgb(43 3 1 / 94%));
  box-shadow:
    inset 0 1px 0 rgb(255 245 182 / 35%),
    0 0 8px rgb(255 133 18 / 55%),
    0 2px 4px rgb(0 0 0 / 62%);
  font-family: "Cinzel", "Trajan Pro", Georgia, serif;
  font-size: 0.42em;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.13em;
  text-indent: 0.13em;
  text-shadow: 0 1px 0 #4b0802, 0 0 5px rgb(255 177 35 / 72%);
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0;
}

.nexoria-damage-number.is-finisher,
.nexoria-damage-number--finisher {
  font-size: clamp(1.55rem, calc(1.08rem + 2vw), 2.2rem) !important;
  font-weight: 900;
  letter-spacing: 0.04em;
  filter:
    drop-shadow(0 4px 3px rgb(0 0 0 / 72%))
    drop-shadow(0 0 9px rgb(255 104 26 / 58%));
}

.nexoria-damage-number.is-finisher.is-critical,
.nexoria-damage-number--finisher.nexoria-damage-number--critical {
  font-size: clamp(1.9rem, calc(1.24rem + 2.65vw), 2.65rem) !important;
  text-shadow:
    -2px -1px 0 var(--damage-outline),
    2px -1px 0 var(--damage-outline),
    -2px 2px 0 var(--damage-outline-deep),
    2px 2px 0 var(--damage-outline-deep),
    0 4px 0 var(--damage-outline-deep),
    0 5px 13px rgb(54 2 0 / 92%),
    0 0 11px rgb(255 142 17 / 94%),
    0 0 25px rgb(255 205 69 / 68%);
}

@media (max-width: 640px) {
  .nexoria-damage-number-layer {
    padding:
      max(8px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }

  .nexoria-damage-number {
    max-inline-size: calc(100vw - 24px);
    font-size: clamp(0.86rem, 4.2vw, 1.1rem) !important;
    -webkit-text-stroke-width: 0.7px;
  }

  .nexoria-damage-number.is-critical,
  .nexoria-damage-number--critical {
    font-size: clamp(1.18rem, 5.8vw, 1.6rem) !important;
  }

  .nexoria-damage-number.is-finisher,
  .nexoria-damage-number--finisher {
    font-size: clamp(1.4rem, 7vw, 1.85rem) !important;
  }

  .nexoria-damage-number.is-finisher.is-critical,
  .nexoria-damage-number--finisher.nexoria-damage-number--critical {
    font-size: clamp(1.65rem, 8.5vw, 2.15rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nexoria-damage-number {
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  .nexoria-damage-number.is-reduced-motion {
    translate: -50% -58%;
    transform: none !important;
    opacity: 1 !important;
    filter: none;
  }
}

@media (prefers-contrast: more) {
  .nexoria-damage-number {
    -webkit-text-stroke-width: 1.1px;
    text-shadow:
      -2px -1px 0 #280301,
      2px -1px 0 #280301,
      -2px 2px 0 #280301,
      2px 2px 0 #280301,
      0 4px 7px #000;
  }
}

@media (forced-colors: active) {
  .nexoria-damage-number,
  .nexoria-damage-number__value {
    color: CanvasText;
    background: none;
    filter: none;
    -webkit-text-fill-color: CanvasText;
    -webkit-text-stroke: 0;
    text-shadow: none;
  }

  .nexoria-damage-number.is-critical,
  .nexoria-damage-number--critical {
    color: Highlight;
    -webkit-text-fill-color: Highlight;
  }

  .nexoria-damage-number__critical {
    border: 1px solid Highlight;
    color: HighlightText;
    background: Highlight;
    box-shadow: none;
    -webkit-text-fill-color: HighlightText;
  }
}