/* Responsive connection-map correction for tablet and small desktop widths. */
@media (min-width:761px) and (max-width:1100px){
  .connection-canvas{
    height:auto;
    padding:28px;
    display:flex;
    flex-direction:column;
  }
  .connection-app-grid{
    width:100%;
    height:auto;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-content:start;
    gap:12px;
  }
  .connected-world .connection-center{
    position:relative;
    inset:auto;
    transform:none;
    margin:28px auto 0;
    flex:0 0 auto;
  }
}

/* Keep the coordinator card in normal flow on mobile, without covering the final integration. */
@media (max-width:760px){
  .connected-world .connection-center{
    inset:auto;
    top:auto;
    right:auto;
    bottom:auto;
    left:auto;
    margin:28px auto 0;
  }
}