/* v5.5.41 · Specialization ceremony + compact stage.
   Remove the obsolete "grow-up" reserve space, align the four cards directly
   under the shared toolbar, and make unlock/equip transitions deliberately slow. */

@media(min-width:1281px){
  /* v4.1.8 reserved ~58px above the cards for the old rising-card animation.
     Cards no longer change height, so reclaim the entire stage. */
  #specializationPanel #specializationCards.specialization-cards{
    box-sizing:border-box!important;
    height:auto!important;
    min-height:0!important;
    align-items:stretch!important;
    padding:0!important;
    margin:0!important;
    gap:17px!important;
    overflow:visible!important;
  }

  /* Keep the toolbar-to-card rhythm tight and deterministic. */
  #specializationPanel .specialization-workspace-toolbar.workspace-toolbar{
    margin-bottom:8px!important;
  }

  /* Final equipped portrait is intentionally more obvious than v5.5.40. */
  #specializationCards .specialization-card.spec-card.state-3 .spec-player-image img,
  #specializationCards .specialization-card.spec-card.state-3:hover .spec-player-image img{
    transform:scale(1.14)!important;
    transform-origin:50% 42%!important;
    transition:
      transform 2.15s cubic-bezier(.22,.68,.24,1),
      filter 1.8s cubic-bezier(.22,.68,.24,1)!important;
  }

  /* Gold does not snap on: it blooms slowly after equip begins. */
  #specializationCards .specialization-card.spec-card.state-3{
    transition:
      border-color 1.65s cubic-bezier(.22,.68,.24,1),
      box-shadow 1.85s cubic-bezier(.22,.68,.24,1),
      background 1.85s cubic-bezier(.22,.68,.24,1),
      opacity .45s ease,
      filter 1.35s ease!important;
  }
  #specializationCards .specialization-card.spec-card.state-3 .spec-card-title h3,
  #specializationCards .specialization-card.spec-card.state-3 .spec-card-status,
  #specializationCards .specialization-card.spec-card.state-3 .spec-action-btn.is-active{
    transition:
      color 1.5s ease,
      border-color 1.5s ease,
      background 1.5s ease,
      box-shadow 1.5s ease!important;
  }
  #specializationCards .specialization-card.spec-card.state-3::before{
    opacity:1;
    transition:opacity 1.75s cubic-bezier(.22,.68,.24,1)!important;
  }
  #specializationCards .specialization-card.spec-card.state-3::after{
    opacity:1;
    transform:scaleX(1);
    transform-origin:center center;
    transition:
      opacity 1.55s ease,
      transform 1.85s cubic-bezier(.22,.68,.24,1)!important;
  }

  /* Neutral first phase. JS removes this after the equip gesture has started,
     then the rules above ease into the full gold state. */
  #specializationCards .specialization-card.spec-card.state-3.gold-pending{
    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-3.gold-pending .spec-card-title h3{
    color:#edf2f6!important;
  }
  #specializationCards .specialization-card.spec-card.state-3.gold-pending .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-3.gold-pending .spec-action-btn.is-active{
    color:#c7d0d9!important;
    border-color:rgba(var(--spec-ui-silver),.18)!important;
    background:rgba(255,255,255,.025)!important;
  }
  #specializationCards .specialization-card.spec-card.state-3.gold-pending::before{
    opacity:0!important;
  }
  #specializationCards .specialization-card.spec-card.state-3.gold-pending::after{
    opacity:0!important;
    transform:scaleX(.20)!important;
  }
}

/* Remove the old side inset on the 2-column/tablet layout as well so its
   content rail still follows the toolbar edge. */
@media(max-width:1280px) and (min-width:761px){
  #specializationPanel #specializationCards.specialization-cards{
    padding-left:0!important;
    padding-right:0!important;
  }
  #specializationCards .specialization-card.spec-card.state-3 .spec-player-image img,
  #specializationCards .specialization-card.spec-card.state-3:hover .spec-player-image img{
    transform:scale(1.09)!important;
    transform-origin:50% 42%!important;
    transition:transform 1.9s cubic-bezier(.22,.68,.24,1),filter 1.6s ease!important;
  }
}