/* V1.50 · Always-visible skill readiness, cooldown and lock language. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .skill-label.skill-label[data-skill-readiness] {
  position: relative !important;
  isolation: isolate !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .skill-label.skill-label > .inline-skill-cooldown[data-skill-readiness] {
  position: relative !important;
  isolation: isolate !important;
  min-width: 60px !important;
  gap: 4px !important;
  grid-auto-flow: column !important;
  border-color: rgba(151, 193, 205, .32) !important;
  color: #dcebed !important;
  -webkit-text-fill-color: #dcebed !important;
  background: linear-gradient(180deg, rgba(51, 70, 82, .82), rgba(13, 23, 31, .92)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 3px 8px rgba(0,0,0,.18) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .inline-skill-cooldown[data-skill-readiness]::before {
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  display: block !important;
  border: 1px solid currentColor !important;
  border-radius: 50% !important;
  background: currentColor !important;
  box-shadow: 0 0 7px currentColor !important;
  opacity: .8 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .skill-label[data-skill-readiness="ready"] > .inline-skill-cooldown {
  border-color: rgba(111, 231, 185, .58) !important;
  color: #baffdf !important;
  -webkit-text-fill-color: #baffdf !important;
  background: linear-gradient(180deg, rgba(35, 112, 85, .76), rgba(11, 41, 35, .92)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 12px rgba(69, 224, 163, .2) !important;
  animation: skill-ready-breathe 1.8s ease-in-out infinite !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .skill-label[data-skill-readiness="cooldown"] > .inline-skill-cooldown {
  border-color: rgba(112, 182, 230, .52) !important;
  color: #c9ecff !important;
  -webkit-text-fill-color: #c9ecff !important;
  background: linear-gradient(180deg, rgba(41, 92, 128, .76), rgba(13, 33, 49, .92)) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .skill-label[data-skill-readiness="cooldown"] > .inline-skill-cooldown::before {
  background: conic-gradient(currentColor var(--skill-cooldown-angle, 180deg), transparent 0) !important;
  box-shadow: 0 0 6px rgba(112, 203, 255, .46) !important;
  animation: skill-cooldown-turn 1.5s linear infinite !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .skill-label[data-skill-readiness="locked"] > .inline-skill-cooldown,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .skill-label[data-skill-readiness="suppressed"] > .inline-skill-cooldown {
  border-color: rgba(238, 105, 91, .5) !important;
  color: #ffd4ca !important;
  -webkit-text-fill-color: #ffd4ca !important;
  background: linear-gradient(180deg, rgba(111, 46, 43, .76), rgba(43, 18, 22, .92)) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .skill-label[data-skill-readiness="pending"] > .inline-skill-cooldown,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .skill-label[data-skill-readiness="enhanced"] > .inline-skill-cooldown {
  border-color: rgba(245, 202, 93, .58) !important;
  color: #fff0b7 !important;
  -webkit-text-fill-color: #fff0b7 !important;
  background: linear-gradient(180deg, rgba(120, 83, 24, .78), rgba(45, 31, 17, .93)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 11px rgba(238, 179, 53, .18) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .skill-label.skill-became-ready > .inline-skill-cooldown {
  animation: skill-became-ready 720ms cubic-bezier(.14,.8,.18,1) both !important;
}

@keyframes skill-ready-breathe { 0%,100% { filter: brightness(.96); } 50% { filter: brightness(1.14); } }
@keyframes skill-cooldown-turn { to { transform: rotate(360deg); } }
@keyframes skill-became-ready {
  0% { opacity: .45; transform: scale(.9); box-shadow: 0 0 0 rgba(69,224,163,0); }
  42% { opacity: 1; transform: scale(1.08); box-shadow: 0 0 0 2px rgba(146,255,214,.38), 0 0 18px rgba(69,224,163,.36); }
  100% { opacity: 1; transform: scale(1); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 12px rgba(69,224,163,.2); }
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .skill-label.skill-label > .inline-skill-cooldown[data-skill-readiness] {
    min-width: 48px !important;
    min-height: 16px !important;
    padding: 2px 4px !important;
    font-size: 8px !important;
  }
}

/* The readiness visual-QA board uses a deliberately neutral grid so legacy battle-card
   positioning cannot hide a state during desktop or mobile regression captures. */
html body #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot #battle#battle#battle#battle#battle#battle#battle#battle#battle > #grid#grid {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, 260px) !important;
  gap: 24px !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
}

html body #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot #battle#battle#battle#battle#battle#battle#battle#battle#battle > #grid#grid > .role-card.role-card.role-card.role-card {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 260px !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 104px !important;
  min-height: 104px !important;
  max-height: 104px !important;
  margin: 0 !important;
  transform: none !important;
}

html body #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot #battle#battle#battle#battle#battle#battle#battle#battle#battle > #grid#grid .skill-label.skill-label {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  transform: none !important;
}

@media (max-width: 720px) {
  html body #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot #battle#battle#battle#battle#battle#battle#battle#battle#battle > #grid#grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
  }

  html body #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot #battle#battle#battle#battle#battle#battle#battle#battle#battle > #grid#grid > .role-card.role-card.role-card.role-card {
    width: 100% !important;
    height: 84px !important;
    min-height: 84px !important;
    max-height: 84px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .skill-label[data-skill-readiness] > .inline-skill-cooldown,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .skill-label[data-skill-readiness] > .inline-skill-cooldown::before {
    animation-duration: 100ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Established profession skins use deliberately high specificity; keep their skill plate,
   while the readiness badge owns its semantic color language. */
.skill-label[data-skill-readiness="ready"] { --skill-readiness-color: #baffdf; --skill-readiness-line: rgba(111,231,185,.58); --skill-readiness-bg: linear-gradient(180deg,rgba(35,112,85,.76),rgba(11,41,35,.92)); --skill-readiness-glow: 0 0 12px rgba(69,224,163,.2); }
.skill-label[data-skill-readiness="cooldown"] { --skill-readiness-color: #c9ecff; --skill-readiness-line: rgba(112,182,230,.52); --skill-readiness-bg: linear-gradient(180deg,rgba(41,92,128,.76),rgba(13,33,49,.92)); --skill-readiness-glow: 0 3px 8px rgba(0,0,0,.18); }
.skill-label[data-skill-readiness="locked"], .skill-label[data-skill-readiness="suppressed"] { --skill-readiness-color: #ffd4ca; --skill-readiness-line: rgba(238,105,91,.5); --skill-readiness-bg: linear-gradient(180deg,rgba(111,46,43,.76),rgba(43,18,22,.92)); --skill-readiness-glow: 0 3px 8px rgba(0,0,0,.18); }
.skill-label[data-skill-readiness="pending"], .skill-label[data-skill-readiness="enhanced"] { --skill-readiness-color: #fff0b7; --skill-readiness-line: rgba(245,202,93,.58); --skill-readiness-bg: linear-gradient(180deg,rgba(120,83,24,.78),rgba(45,31,17,.93)); --skill-readiness-glow: 0 0 11px rgba(238,179,53,.18); }

html body:not(.maintenance-mode)
#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app
#battle#battle#battle#battle#battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden])
.role-card.role-card.role-card.role-card .skill-label.skill-label.skill-label[data-skill-readiness] > .inline-skill-cooldown.inline-skill-cooldown.inline-skill-cooldown[data-skill-readiness] {
  min-width: 60px !important;
  color: var(--skill-readiness-color) !important;
  -webkit-text-fill-color: var(--skill-readiness-color) !important;
  border-color: var(--skill-readiness-line) !important;
  background: var(--skill-readiness-bg) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), var(--skill-readiness-glow) !important;
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app
  #battle#battle#battle#battle#battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden])
  .role-card.role-card.role-card.role-card .skill-label.skill-label.skill-label[data-skill-readiness] > .inline-skill-cooldown.inline-skill-cooldown.inline-skill-cooldown[data-skill-readiness] {
    min-width: 48px !important;
  }
}