/* v5.5.40 · Specialization cards
   Archetype = neutral silver identity.
   Locked = dark/blurred, focused = subtle silver selection.
   Unlocked = full-colour silver-ready state.
   Equipped specialization = gold light + portrait zoom, never card lift/height growth. */

#specializationCards{
  --spec-ui-silver:205,216,227;
  --spec-ui-gold:216,184,95;
}

/* ---------- Geometry: cards always stay aligned ---------- */
#specializationCards .specialization-card,
#specializationCards .specialization-card:hover,
#specializationCards .specialization-card.is-focused,
#specializationCards .specialization-card.state-3,
#specializationCards .specialization-card.state-3:hover,
#specializationCards .specialization-card.state-3.dock-hover{
  transform:none!important;
}

#specializationCards .specialization-card{
  transition:
    border-color .22s ease,
    box-shadow .26s ease,
    background .26s ease,
    opacity .2s ease,
    filter .2s ease!important;
}

/* Old equip choreography changed card/image-area heights. Disable it completely. */
#specializationCards .specialization-card.just-equipped{
  animation:none!important;
}

@media(min-width:1281px){
  #specializationCards .specialization-card,
  #specializationCards .specialization-card.base-card,
  #specializationCards .specialization-card.state-3{
    height:var(--spec-normal-height,426px)!important;
    min-height:0!important;
  }
  #specializationCards .spec-player-image,
  #specializationCards .spec-base-visual,
  #specializationCards .specialization-card.state-3 .spec-player-image,
  #specializationCards .specialization-card.state-3 .spec-base-visual{
    height:var(--spec-visual-normal,108px)!important;
    flex:0 0 var(--spec-visual-normal,108px)!important;
  }
}

/* ---------- LOCKED specialty ---------- */
#specializationCards .specialization-card.spec-card.state-1{
  opacity:1!important;
  border-color:rgba(255,255,255,.045)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.008),transparent 30%),
    rgba(8,13,18,.97)!important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.008)!important;
}

#specializationCards .specialization-card.spec-card.state-1 .spec-player-image{
  background:#091016!important;
}
#specializationCards .specialization-card.spec-card.state-1 .spec-player-image img{
  filter:grayscale(.98) saturate(.16) brightness(.44) contrast(.94) blur(1.15px)!important;
  transform:scale(1.025)!important;
}
#specializationCards .specialization-card.spec-card.state-1 .spec-player-image>span{
  color:#56616b!important;
}
#specializationCards .specialization-card.spec-card.state-1 .spec-card-title h3{
  color:#78838d!important;
}
#specializationCards .specialization-card.spec-card.state-1 .spec-card-title>span{
  color:#4d5862!important;
}
#specializationCards .specialization-card.spec-card.state-1 .spec-requirements,
#specializationCards .specialization-card.spec-card.state-1 .spec-reward-row{
  opacity:.64!important;
}
#specializationCards .specialization-card.spec-card.state-1 .spec-card-status{
  color:#68737e!important;
  border-color:rgba(255,255,255,.065)!important;
  background:rgba(7,11,15,.88)!important;
  box-shadow:none!important;
}

/* Focus is now silver/white only — copper is fully removed. */
#specializationCards .specialization-card.spec-card.state-1.is-focused{
  border-color:rgba(var(--spec-ui-silver),.27)!important;
  background:
    linear-gradient(180deg,rgba(var(--spec-ui-silver),.022),transparent 30%),
    rgba(9,14,19,.975)!important;
  box-shadow:
    0 13px 30px rgba(0,0,0,.23),
    0 0 0 1px rgba(var(--spec-ui-silver),.075),
    0 0 18px rgba(var(--spec-ui-silver),.028)!important;
}
#specializationCards .specialization-card.spec-card.state-1.is-focused .spec-player-image img{
  filter:grayscale(.94) saturate(.22) brightness(.50) contrast(.96) blur(.85px)!important;
}
#specializationCards .specialization-card.spec-card.state-1.is-focused .spec-card-title h3{
  color:#929da7!important;
}
#specializationCards .specialization-card.spec-card.state-1.is-focused .spec-card-status{
  color:#929da7!important;
  border-color:rgba(var(--spec-ui-silver),.16)!important;
}

/* ---------- UNLOCKED specialty ---------- */
#specializationCards .specialization-card.spec-card.state-2{
  opacity:1!important;
  border-color:rgba(var(--spec-ui-silver),.25)!important;
  background:
    radial-gradient(ellipse 80% 28% at 50% -4%,rgba(var(--spec-ui-silver),.052),transparent 72%),
    linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.010) 44%,transparent 72%),
    rgba(12,18,24,.965)!important;
  box-shadow:
    0 14px 32px rgba(0,0,0,.20),
    inset 0 0 0 1px rgba(225,233,240,.035)!important;
}
#specializationCards .specialization-card.spec-card.state-2 .spec-player-image img{
  filter:saturate(1) brightness(1) contrast(1)!important;
  transform:none!important;
}
#specializationCards .specialization-card.spec-card.state-2 .spec-player-image>span{
  color:#abb6c0!important;
}
#specializationCards .specialization-card.spec-card.state-2 .spec-card-title h3{
  color:#edf2f6!important;
}
#specializationCards .specialization-card.spec-card.state-2 .spec-card-title>span{
  color:#7c8894!important;
}
#specializationCards .specialization-card.spec-card.state-2 .spec-card-status{
  color:#c7d0d9!important;
  border-color:rgba(var(--spec-ui-silver),.22)!important;
  background:rgba(24,31,38,.86)!important;
  box-shadow:none!important;
}
#specializationCards .specialization-card.spec-card.state-2.is-focused{
  border-color:rgba(var(--spec-ui-silver),.48)!important;
  box-shadow:
    0 15px 34px rgba(0,0,0,.22),
    0 0 0 1px rgba(var(--spec-ui-silver),.14),
    0 0 20px rgba(var(--spec-ui-silver),.045),
    inset 0 0 0 1px rgba(225,233,240,.045)!important;
}

/* ---------- EQUIPPED specialty: gold belongs here only ---------- */
#specializationCards .specialization-card.spec-card.state-3{
  z-index:3!important;
  border-color:rgba(var(--spec-ui-gold),.46)!important;
  background:
    radial-gradient(ellipse 76% 25% at 50% -2%,rgba(237,211,132,.10),transparent 72%),
    linear-gradient(180deg,rgba(var(--spec-ui-gold),.058),rgba(var(--spec-ui-gold),.020) 32%,transparent 56%),
    linear-gradient(145deg,rgba(255,255,255,.034),rgba(255,255,255,.008) 43%,transparent 70%),
    rgba(12,18,24,.965)!important;
  box-shadow:
    0 16px 36px rgba(0,0,0,.25),
    0 0 0 1px rgba(var(--spec-ui-gold),.105),
    0 0 27px rgba(var(--spec-ui-gold),.095),
    inset 0 0 24px rgba(var(--spec-ui-gold),.025)!important;
}
#specializationCards .specialization-card.spec-card.state-3 .spec-player-image img{
  filter:saturate(1.04) brightness(1.015) contrast(1.01)!important;
  transform:scale(1.065)!important;
  transform-origin:50% 43%!important;
  transition:transform .62s cubic-bezier(.18,.76,.22,1),filter .35s ease!important;
}
#specializationCards .specialization-card.spec-card.state-3 .spec-card-title h3{
  color:#ead58a!important;
}
#specializationCards .specialization-card.spec-card.state-3 .spec-card-status{
  color:#e1c872!important;
  border-color:rgba(var(--spec-ui-gold),.28)!important;
  background:rgba(38,32,18,.80)!important;
}
#specializationCards .specialization-card.spec-card.state-3 .spec-action-btn.is-active{
  color:#e6d58e!important;
  border-color:rgba(var(--spec-ui-gold),.31)!important;
  background:linear-gradient(180deg,rgba(var(--spec-ui-gold),.095),rgba(var(--spec-ui-gold),.038))!important;
}

/* Keep the existing decorative pseudo layers gold only on equipped specialties. */
#specializationCards .specialization-card.spec-card.state-3::before{
  background:
    radial-gradient(ellipse 66% 21% at 50% 0%,rgba(255,229,147,.14),transparent 72%),
    linear-gradient(180deg,transparent 0,transparent 70%,rgba(var(--spec-ui-gold),.050) 100%)!important;
}
#specializationCards .specialization-card.spec-card.state-3::after{
  background:linear-gradient(90deg,transparent,rgba(var(--spec-ui-gold),.42),transparent)!important;
}

/* ---------- DEFAULT ARCHETYPE CARD: silver, never gold ---------- */
#specializationCards .specialization-card.base-card,
#specializationCards .specialization-card.base-card.state-2,
#specializationCards .specialization-card.base-card.state-3{
  border-color:rgba(var(--spec-ui-silver),.28)!important;
  background:
    radial-gradient(ellipse 78% 26% at 50% -3%,rgba(var(--spec-ui-silver),.070),transparent 72%),
    linear-gradient(145deg,rgba(255,255,255,.037),rgba(255,255,255,.010) 44%,transparent 72%),
    rgba(12,18,24,.965)!important;
  box-shadow:
    0 14px 32px rgba(0,0,0,.21),
    0 0 0 1px rgba(var(--spec-ui-silver),.055),
    inset 0 0 18px rgba(var(--spec-ui-silver),.018)!important;
}
#specializationCards .specialization-card.base-card.state-3{
  border-color:rgba(var(--spec-ui-silver),.43)!important;
  box-shadow:
    0 15px 34px rgba(0,0,0,.22),
    0 0 0 1px rgba(var(--spec-ui-silver),.11),
    0 0 22px rgba(var(--spec-ui-silver),.055),
    inset 0 0 21px rgba(var(--spec-ui-silver),.022)!important;
}
#specializationCards .specialization-card.base-card.is-focused{
  border-color:rgba(var(--spec-ui-silver),.50)!important;
  box-shadow:
    0 15px 34px rgba(0,0,0,.22),
    0 0 0 1px rgba(var(--spec-ui-silver),.14),
    0 0 21px rgba(var(--spec-ui-silver),.05)!important;
}
#specializationCards .specialization-card.base-card .spec-base-visual{
  background:radial-gradient(circle at 50% 48%,rgba(var(--spec-ui-silver),.085),transparent 43%)!important;
}
#specializationCards .specialization-card.base-card .spec-base-visual img{
  transform:none!important;
  filter:drop-shadow(0 9px 20px rgba(0,0,0,.28)) drop-shadow(0 0 10px rgba(var(--spec-ui-silver),.055))!important;
}
#specializationCards .specialization-card.base-card .spec-card-title h3,
#specializationCards .specialization-card.base-card.state-3 .spec-card-title h3{
  color:#edf2f6!important;
}
#specializationCards .specialization-card.base-card .spec-card-status,
#specializationCards .specialization-card.base-card.state-3 .spec-card-status{
  color:#ccd5de!important;
  border-color:rgba(var(--spec-ui-silver),.25)!important;
  background:rgba(24,31,38,.86)!important;
}
#specializationCards .specialization-card.base-card .spec-action-btn.is-active,
#specializationCards .specialization-card.base-card.state-3 .spec-action-btn.is-active{
  color:#d9e0e7!important;
  border-color:rgba(var(--spec-ui-silver),.28)!important;
  background:linear-gradient(180deg,rgba(var(--spec-ui-silver),.070),rgba(255,255,255,.018))!important;
}
#specializationCards .specialization-card.base-card.state-3::before{
  background:
    radial-gradient(ellipse 66% 21% at 50% 0%,rgba(232,240,247,.105),transparent 72%),
    linear-gradient(180deg,transparent 0,transparent 74%,rgba(var(--spec-ui-silver),.032) 100%)!important;
}
#specializationCards .specialization-card.base-card.state-3::after{
  background:linear-gradient(90deg,transparent,rgba(var(--spec-ui-silver),.30),transparent)!important;
}

/* Hover is deliberately quiet; state, not motion, carries hierarchy. */
#specializationCards .specialization-card:hover{
  filter:none!important;
}
#specializationCards .specialization-card.spec-card.state-1:hover .spec-player-image img{
  transform:scale(1.025)!important;
}
#specializationCards .specialization-card.spec-card.state-2:hover .spec-player-image img{
  transform:none!important;
}
#specializationCards .specialization-card.spec-card.state-3:hover .spec-player-image img{
  transform:scale(1.065)!important;
}

@media(max-width:1280px){
  #specializationCards .specialization-card.spec-card.state-3 .spec-player-image img{
    transform:scale(1.045)!important;
  }
}