/* Battle feedback stays local to the actor, target, particles, and damage numbers.
   Cover both body itself and nested arenas so even an older cached VFX module
   cannot animate the whole viewport. */
html body:not(.maintenance-mode).vfx-screen-shake,
html body:not(.maintenance-mode).vfx-screen-shake-medium,
html body:not(.maintenance-mode).vfx-screen-shake-strong,
html body:not(.maintenance-mode) :is(.vfx-screen-shake, .vfx-screen-shake-medium, .vfx-screen-shake-strong) {
  animation: none !important;
  transform: none !important;
}

/* Battle and character-select big cards share one complete faction frame. */
html body:not(.maintenance-mode) #battleCharacterPreview#battleCharacterPreview.character-preview {
  --preview-frame-bind-outset-x: var(--card-frame-outset-x, clamp(30px, 4.1vh, 44px));
  --preview-frame-bind-outset-y: var(--card-frame-outset-y, clamp(46px, 6vh, 64px));
  overflow: visible !important;
  isolation: isolate !important;
}

html body:not(.maintenance-mode) #battleCharacterPreview#battleCharacterPreview > .preview-card-outer-frame.preview-card-outer-frame {
  position: absolute !important;
  top: calc(var(--preview-frame-bind-outset-y) * -1) !important;
  right: calc(var(--preview-frame-bind-outset-x) * -1) !important;
  bottom: calc(var(--preview-frame-bind-outset-y) * -1) !important;
  left: calc(var(--preview-frame-bind-outset-x) * -1) !important;
  z-index: 10000 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  filter:
    drop-shadow(0 8px 14px rgba(8, 24, 42, 0.28))
    drop-shadow(0 0 12px rgba(132, 200, 255, 0.2)) !important;
}

html body:not(.maintenance-mode) #battleCharacterPreview#battleCharacterPreview[data-select-faction="luminary"] > .preview-card-outer-frame,
html body:not(.maintenance-mode) #battleCharacterPreview#battleCharacterPreview:not([data-select-faction]) > .preview-card-outer-frame {
  background-image: url("assets/ui/character-card-frame-luminary-complete-v1.png?v=V1.32Beta-bigcard-unified1") !important;
}

html body:not(.maintenance-mode) #battleCharacterPreview#battleCharacterPreview[data-select-faction="neutral"] > .preview-card-outer-frame {
  background-image: url("assets/ui/character-card-frame-neutral-complete-v1.png?v=V1.32Beta-bigcard-unified1") !important;
}

html body:not(.maintenance-mode) #battleCharacterPreview#battleCharacterPreview[data-select-faction="villain"] > .preview-card-outer-frame {
  background-image: url("assets/ui/character-card-frame-villain-complete-v1.png?v=V1.32Beta-bigcard-unified1") !important;
}

html body:not(.maintenance-mode) #battleCharacterPreview#battleCharacterPreview #battlePreviewArt.preview-art::before {
  content: none !important;
  animation: none !important;
}

/* The battle big-card skill treatment is the shared design source. */
html body:not(.maintenance-mode) :is(#characterPreview, #battleCharacterPreview).character-preview {
  --battle-skill-profession: var(--character-profession-color, var(--battle-title-color, var(--preview-title-color, #d7b66c)));
}

html body:not(.maintenance-mode) :is(#characterPreview, #battleCharacterPreview).character-preview .preview-skill {
  box-sizing: border-box !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: clamp(7px, 1dvh, 10px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) :is(#characterPreview #previewSkill, #battleCharacterPreview #battlePreviewSkill) {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: min(72%, 240px) !important;
  min-width: min(72%, 240px) !important;
  max-width: 100% !important;
  min-height: clamp(30px, 4.2dvh, 36px) !important;
  height: auto !important;
  margin: 0 !important;
  padding: clamp(5px, 0.75dvh, 7px) clamp(11px, 1.5dvh, 15px) !important;
  gap: 7px !important;
  border: 1px solid color-mix(in srgb, var(--battle-skill-profession) 76%, #ffffff 24%) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--battle-skill-profession) 56%, transparent) 0, transparent 58%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--battle-skill-profession) 64%, #263346 36%) 0%,
      color-mix(in srgb, var(--battle-skill-profession) 36%, #050913 64%) 100%) !important;
  color: #fffaf0 !important;
  -webkit-text-fill-color: #fffaf0 !important;
  font-size: clamp(12px, 1.55dvh, 14px) !important;
  line-height: 1.08 !important;
  text-align: left !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.82),
    0 0 8px color-mix(in srgb, var(--battle-skill-profession) 52%, transparent) !important;
  box-shadow:
    0 8px 18px color-mix(in srgb, var(--battle-skill-profession) 32%, rgba(0, 0, 0, 0.56) 68%),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 0 0 1px color-mix(in srgb, var(--battle-skill-profession) 46%, transparent) !important;
  transform: none !important;
}

html body:not(.maintenance-mode) :is(#characterPreview #previewSkill, #battleCharacterPreview #battlePreviewSkill) :is(.skill-inline-text, .skill-inline-passive-tag) {
  color: #fffaf0 !important;
  -webkit-text-fill-color: #fffaf0 !important;
}

html body:not(.maintenance-mode) :is(#characterPreview #previewDescription, #battleCharacterPreview #battlePreviewDescription) {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: clamp(54px, 7.2dvh, 68px) !important;
  max-height: clamp(88px, 13dvh, 118px) !important;
  margin: 0 !important;
  padding: clamp(9px, 1.35dvh, 12px) clamp(11px, 1.7dvh, 15px) !important;
  border: 1px solid rgba(229, 197, 116, 0.88) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 249, 255, 0.94) 66%, rgba(255, 250, 235, 0.9)),
    #ffffff !important;
  color: #17364f !important;
  -webkit-text-fill-color: #17364f !important;
  font-size: clamp(11px, 1.35dvh, 13px) !important;
  line-height: 1.48 !important;
  text-align: left !important;
  text-shadow: none !important;
  box-shadow:
    0 10px 24px rgba(6, 28, 48, 0.17),
    inset 0 0 0 1px rgba(255, 255, 255, 0.82) !important;
  overflow: auto !important;
}

@media (max-width: 680px) {
  html body:not(.maintenance-mode) #battleCharacterPreview#battleCharacterPreview.character-preview {
    --preview-frame-bind-outset-x: var(--card-frame-outset-x, clamp(20px, 5vw, 30px));
    --preview-frame-bind-outset-y: var(--card-frame-outset-y, clamp(30px, 7vw, 44px));
  }

  html body:not(.maintenance-mode) :is(#characterPreview, #battleCharacterPreview).character-preview .preview-skill {
    gap: 6px !important;
  }

  html body:not(.maintenance-mode) :is(#characterPreview #previewSkill, #battleCharacterPreview #battlePreviewSkill) {
    width: min(76%, 220px) !important;
    min-width: min(76%, 220px) !important;
    min-height: 30px !important;
    padding: 5px 10px !important;
  }

  html body:not(.maintenance-mode) :is(#characterPreview #previewDescription, #battleCharacterPreview #battlePreviewDescription) {
    min-height: clamp(50px, 8dvh, 64px) !important;
    max-height: clamp(76px, 12dvh, 100px) !important;
    padding: 8px 10px !important;
  }
}

/* Final specificity lock against the selector screen's legacy crystal-panel overrides. */
html body:not(.maintenance-mode)
#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect
#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview
.preview-skill.preview-skill {
  box-sizing: border-box !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: clamp(7px, 1dvh, 10px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode)
#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect
#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview
#previewSkill#previewSkill#previewSkill#previewSkill#previewSkill#previewSkill {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: start !important;
  width: min(72%, 240px) !important;
  min-width: min(72%, 240px) !important;
  max-width: 100% !important;
  min-height: clamp(30px, 4.2dvh, 36px) !important;
  height: auto !important;
  margin: 0 !important;
  padding: clamp(5px, 0.75dvh, 7px) clamp(11px, 1.5dvh, 15px) !important;
  gap: 7px !important;
  border: 1px solid color-mix(in srgb, var(--battle-skill-profession) 76%, #ffffff 24%) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--battle-skill-profession) 56%, transparent) 0, transparent 58%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--battle-skill-profession) 64%, #263346 36%) 0%,
      color-mix(in srgb, var(--battle-skill-profession) 36%, #050913 64%) 100%) !important;
  color: #fffaf0 !important;
  -webkit-text-fill-color: #fffaf0 !important;
  font-size: clamp(12px, 1.55dvh, 14px) !important;
  line-height: 1.08 !important;
  text-align: left !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.82),
    0 0 8px color-mix(in srgb, var(--battle-skill-profession) 52%, transparent) !important;
  box-shadow:
    0 8px 18px color-mix(in srgb, var(--battle-skill-profession) 32%, rgba(0, 0, 0, 0.56) 68%),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 0 0 1px color-mix(in srgb, var(--battle-skill-profession) 46%, transparent) !important;
  transform: none !important;
}

html body:not(.maintenance-mode)
#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect
#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview
#previewDescription#previewDescription#previewDescription#previewDescription#previewDescription#previewDescription {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: clamp(54px, 7.2dvh, 68px) !important;
  max-height: clamp(88px, 13dvh, 118px) !important;
  margin: 0 !important;
  padding: clamp(9px, 1.35dvh, 12px) clamp(11px, 1.7dvh, 15px) !important;
  border: 1px solid rgba(229, 197, 116, 0.88) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 249, 255, 0.94) 66%, rgba(255, 250, 235, 0.9)),
    #ffffff !important;
  color: #17364f !important;
  -webkit-text-fill-color: #17364f !important;
  font-size: clamp(11px, 1.35dvh, 13px) !important;
  line-height: 1.48 !important;
  text-align: left !important;
  text-shadow: none !important;
  box-shadow:
    0 10px 24px rgba(6, 28, 48, 0.17),
    inset 0 0 0 1px rgba(255, 255, 255, 0.82) !important;
  overflow: auto !important;
}

@media (max-width: 680px) {
  html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview
  .preview-skill.preview-skill {
    gap: 6px !important;
  }

  html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview
  #previewSkill#previewSkill#previewSkill#previewSkill#previewSkill#previewSkill {
    width: min(76%, 220px) !important;
    min-width: min(76%, 220px) !important;
    min-height: 30px !important;
    padding: 5px 10px !important;
  }

  html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview
  #previewDescription#previewDescription#previewDescription#previewDescription#previewDescription#previewDescription {
    min-height: clamp(50px, 8dvh, 64px) !important;
    max-height: clamp(76px, 12dvh, 100px) !important;
    padding: 8px 10px !important;
  }
}