/* Ajuste de aproveitamento vertical/horizontal da Mesa de Sinergias no mobile.
   Escopo visual apenas: não altera seleção, cálculo, raridade ou dados. */

@media(max-width:800px){
  /* No fluxo mobile o Plano da Build passa a ser a primeira seção da página. */
  .build-plan{
    order:-1!important;
    margin-top:0!important;
    margin-bottom:14px!important;
  }
}

@media(max-width:560px){
  .synergy-stage{
    padding-bottom:8px!important;
  }

  /* Compacta a órbita sem apertar os seis slots. */
  .ring{
    height:458px!important;
    min-height:458px!important;
  }
  .hero{
    width:202px!important;
    height:302px!important;
    top:48%!important;
  }

  /* O cartão inferior passa a usar a largura disponível em duas zonas:
     identidade do item à esquerda e impacto à direita. */
  .synergy-stage>.equipment-float{
    width:calc(100% - 14px)!important;
    margin:2px auto 2px!important;
    min-height:58px!important;
    display:grid!important;
    grid-template-columns:30px minmax(0,1fr)!important;
    align-items:center!important;
    gap:9px!important;
    padding:8px 10px!important;
  }
  .synergy-stage>.equipment-float>.equipment-float-icon{
    width:30px!important;
    height:30px!important;
    flex-basis:30px!important;
    align-self:center!important;
  }
  .synergy-stage>.equipment-float>div{
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(105px,.9fr) minmax(120px,1.25fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:10px!important;
    align-items:center!important;
  }
  .synergy-stage>.equipment-float>div>strong{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:11.5px!important;
  }
  .synergy-stage>.equipment-float>div>small{
    grid-column:1!important;
    grid-row:2!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:7.5px!important;
  }
  .synergy-stage>.equipment-float .delta-list{
    grid-column:2!important;
    grid-row:1 / span 2!important;
    align-self:center!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:2px!important;
    margin:0!important;
    padding-left:10px!important;
    border-left:1px solid rgba(154,128,255,.18)!important;
  }
  .synergy-stage>.equipment-float .delta-list span{
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:7.5px!important;
    line-height:1.2!important;
  }
  .synergy-stage>.equipment-float .delta-list i{
    margin-left:2px!important;
    font-size:7.5px!important;
  }

  .stage-count{
    margin:1px 0 0!important;
    line-height:1!important;
  }
  .stage-count strong{
    font-size:16px!important;
  }
}

@media(max-width:390px){
  .ring{
    height:445px!important;
    min-height:445px!important;
  }
  .hero{
    width:192px!important;
    height:288px!important;
  }
  .synergy-stage>.equipment-float>div{
    grid-template-columns:minmax(94px,.85fr) minmax(105px,1.15fr)!important;
    column-gap:7px!important;
  }
  .synergy-stage>.equipment-float .delta-list{
    padding-left:7px!important;
  }
}