/* New specialty portrait layer deliberately contains NO <img>.
   This prevents all old .spec-player-image img animation code from ever touching it. */

#specializationCards .specialization-card.spec-card .spec-player-image {
  position:relative!important;
  height:108px!important;
  flex:0 0 108px!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:
    radial-gradient(circle at 50% 10%, rgba(96,126,154,.24), transparent 52%),
    radial-gradient(circle at 50% 110%, rgba(211,184,95,.15), transparent 44%),
    linear-gradient(180deg, rgba(18,27,35,.99), rgba(9,15,20,.99))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;
}

#specializationCards .specialization-card.spec-card.state-3 .spec-player-image {
  height:108px!important;
  flex-basis:108px!important;
  background:
    radial-gradient(circle at 50% 8%, rgba(110,142,173,.28), transparent 52%),
    radial-gradient(circle at 50% 112%, rgba(211,184,95,.20), transparent 46%),
    linear-gradient(180deg, rgba(19,29,38,.99), rgba(10,16,21,.99))!important;
}

#specializationCards .spec-player-image::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:25% 50%;
  opacity:.28;
}

#specializationCards .spec-player-image::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.012),transparent 25%,rgba(0,0,0,.12) 100%);
}

#specializationCards .spec-player-glow-v2 {
  position:absolute;
  inset:-18% -8% 0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 20%,rgba(112,153,188,.13),transparent 34%),
    radial-gradient(circle at 50% 86%,rgba(211,184,95,.10),transparent 34%);
  transition:opacity .55s ease,filter .55s ease;
}

#specializationCards .spec-player-stage-v2 {
  position:absolute;
  inset:0;
  z-index:2;
  overflow:hidden;
  transform:none!important;
  animation:none!important;
}

#specializationCards .spec-player-portrait-v2 {
  position:absolute;
  left:calc(50% + var(--spec-portrait-x,0%));
  top:calc(50% + var(--spec-portrait-y,18%));
  width:auto;
  height:var(--spec-portrait-scale,105%);
  aspect-ratio:var(--spec-portrait-aspect,0.82);
  transform:translate(-50%,-50%)!important;
  transform-origin:center center!important;
  background-image:var(--spec-portrait-image);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.28));
  pointer-events:none;
  animation:none!important;
  transition:filter .28s ease,opacity .28s ease!important;
}

#specializationCards .specialization-card.state-1 .spec-player-portrait-v2 {
  filter:grayscale(.78) saturate(.38) brightness(.70) drop-shadow(0 12px 18px rgba(0,0,0,.22));
}

#specializationCards .specialization-card:hover .spec-player-portrait-v2,
#specializationCards .specialization-card.state-3 .spec-player-portrait-v2,
#specializationCards .specialization-card.state-3:hover .spec-player-portrait-v2,
#specializationCards .specialization-card.just-equipped .spec-player-portrait-v2 {
  transform:translate(-50%,-50%)!important;
}

#specializationCards .specialization-card.spec-card.just-equipped {
  animation:none!important;
  transform:none!important;
}

#specializationCards .specialization-card.spec-card .spec-player-image > span {
  position:absolute;
  z-index:5;
  left:14px;
  bottom:10px;
}

/* Only atmosphere changes on equip; portrait geometry never changes. */
#specializationCards .specialization-card.spec-card.state-3 .spec-player-glow-v2 {
  opacity:1;
  filter:brightness(1.08);
}